【问题标题】:stop the page scrolling when selecting/dragging text选择/拖动文本时停止页面滚动
【发布时间】:2011-10-18 17:10:05
【问题描述】:

我有一个页面,我不希望用户能够滚动。为了防止它,我只是将 body 设置为隐藏溢出样式。在用户尝试选择一些文本然后拖动到底部之前,这已经足够了。然后窗口随着用户拖动而滚动。我怎样才能防止这种情况发生?

【问题讨论】:

  • 如果您发布您正在使用的当前代码,您将获得更好的响应。如果您可以使用 jsfiddle.net 之类的内容创建一个实时示例,那就更好了。
  • 我认为您的方法有点缺陷,如果您不希望用户看到某些内容,请不要显示它,或者如果您需要一些数据来进行一些奇怪的黑客攻击,请使用 display:none css或隐藏的输入字段。试图阻止基本的浏览器功能是可用性灾难的秘诀。
  • 我为我有缺陷的方法道歉。在某些时间点,在动画期间,div 使用 CSS 变换进行缩放,因此跨越可见区域。在这些时刻,用户的拖动会将它们带出所需的视图区域。我只是希望在这个选择/拖动过程中触发了一些我可以拦截的事件。

标签: javascript html css scroll


【解决方案1】:

使用position: fixed;。如果您希望整个身体不可滚动:

body
{
  position: fixed;
}

编辑:收到用户 Sam 的评论后,我决定返回并再次测试此方法。现在我重新考虑它以及 Sam 担心它会弄乱样式,我得出的结论是,以下将是一个更好的解决方案:

html
{
  position: fixed;
  width: 100%;
  height: 100%;
}

这可以防止某些网站(包括 stackoverflow)最终左对齐。它还使用了可用的最高节点,这应该首先完成。

【讨论】:

  • 我想吻你。没有同性恋
  • 对移动设备不太有用,因为它添加了 safari 地址栏。
  • @TomRoggero 感谢您向正在寻找解决方案的未来开发人员指出这一点;但是,我认为这与问题或答案无关。您所描述的是全屏无滚动条设置。问题中没有具体说明。如果您正在寻找解决方案,请提出另一个问题,而不是简单地否决这个答案。
  • @TomRoggero 我不认为你理解这个问题。它涉及“在选择/拖动文本时停止[ing]页面[从]滚动”。问题中没有提到任何移动设备。与本次讨论无关。甚至问题的性质也有利于移动设备:它涉及拖动选择文本,这在触摸环境中不起作用。在 iOS 设备上,您无法按住以突出显示并拖过屏幕。此解决方案适用于独特的非移动环境。如果您有更好的答案,请发布;否则,请阅读问题并意识到这不包括移动设备。
  • @TomRoggero 我不介意失去代表。如果您不希望它影响您的代表,我可以为您编辑并发表评论,以便您看到它,但除此之外,我真的很高兴这里有这个讨论。我现在只希望有一个我们可以链接的解决方案或为未来的开发人员提供的东西。
【解决方案2】:

我尝试了 Josephs 的回答,但它会弄乱网站上的很多风格。

另一种方法是将网站的溢出设置为隐藏,这也远非理想,但对我来说并没有弄乱任何样式,希望这对某人有所帮助。

body {
  overflow-y: hidden;     
}

【讨论】:

  • 我认为这是更正确的解决方案。 overflow 直接处理页面的滚动。虽然这并不能纠正原始海报在突出显示文本时出现的移动问题,但在很多需要阻止滚动的情况下,它应该会有所帮助。
  • 是的,我已经(在我的问题中)提到了这一点,因为在我尝试选择文本之前我一直在成功使用它。
  • 哦,天哪,我完全误读了这个问题,正忙着寻找答案。对不起,我的坏事
【解决方案3】:

很有帮助

html
{
    overflow: hidden;

}

【讨论】:

  • 这实际上是危险的,因为它会隐藏滚动条并给你一种身体不可滚动的错误感觉。当用户拖动任何选定的文本时,这不会阻止页面滚动。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2016-12-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-06-14
  • 1970-01-01
相关资源
最近更新 更多