如何暂时阻止可滚动的 div 滚动？答案

【问题标题】：How can I temporarily prevent a scrollable div from scrolling?如何暂时阻止可滚动的 div 滚动？
【发布时间】：2010-10-14 14:53:51
【问题描述】：

这是我目前的情况：

我有一个包含几个可滚动 div 的网页。这些 div 中的每一个都包含许多对象。我正在使用 YUI 来显示可以在每个对象上执行的操作的弹出菜单。每个对象都有自己的与之关联的菜单，该菜单是动态构建和显示的。弹出菜单可以很大，并且可以与可滚动 div 的边界重叠。

从我认为的焦点问题（菜单必须可访问）来看，当我将鼠标悬停在可滚动 div 边缘顶部的操作上时，div 会自动滚动，移动内容但离开菜单静止。在发生这种情况时尝试动态移动菜单不是我想做的事情，因为我认为这会提供糟糕的用户体验。

所以我需要防止这个集中菜单滚动 div。我提供最佳用户界面的想法是防止这些内部 div 在菜单打开时滚动。这使菜单位于最佳位置，以向用户显示正在操作的项目。如果用户想滚动该框，可以点击关闭菜单，然后正常滚动。

我该怎么做？我需要一个适用于主流浏览器的解决方案。

我的第一个想法是监听那个特定元素的 onscroll 事件。不幸的是，似乎没有一种简单的方法可以防止滚动发生。一方面，我的 Javascript 事件代码似乎在实际滚动发生后执行。

然后，我想既然我的代码是在对象滚动后运行的，我可以重置 obj.scrollTop 和 obj.scrollLeft。果然，这似乎可行，尽管我担心在慢速浏览器上用户会看到 div 内的内容“跳来跳去”。此外，如果元素滚动的量是事件对象的一部分，那就太好了。它卡在某个地方了吗？我正在寻找一种替代方法，无需为此元素存储 scrollTop 和 scrollLeft 变量，然后在暂时禁用滚动时使用它们。

解决整个问题的最佳方法是什么？

【问题讨论】：

为什么要这样做？这听起来像是一场可用性噩梦。你能解释一下使用的上下文是什么吗？
我的猜测是迫使欧盟阅读条款和条件或许可协议
@Rahul 我已经更新了我的问题，提供了有关我正在尝试做什么的更详细信息。这是一个严重的情况，我认为这是处理它的最佳方式。

标签： javascript html events javascript-events event-handling

【解决方案1】：

我同意 Anthony 关于您试图禁止的功能的介绍。如果您要禁用滚动，则应使页面的该部分在视觉上禁用或删除。

为此，您可以在相关可滚动 div 的顶部放置一个半透明 div，这将捕获鼠标事件并直观地显示可滚动 div 目前处于非活动状态。很难让跨浏览器兼容并且不完美，但同样很少有像这样的客户端技巧。

【讨论】：

【解决方案2】：

简单的答案是不，你不能这样做。如果你想要一个跨浏览器的解决方案，那就更不行了。

~~向用户提供可以滚动的清晰可见性，然后拒绝他们，这只是糟糕的 UI 设计。~~

好的，所以在您编辑之后，您实际上并没有试图阻止用户滚动。

不过，主要答案仍然正确。听起来好像焦点将变为矩形（可能是锚？），它没有完全显示并导致滚动。这个矩形必须获得焦点是否有原因？无障碍？

【讨论】：

我已更新问题以更好地描述我想要完成的任务。我目前认为用户界面非常实用且设计得非常好。但是菜单的焦点导致底层 div 滚动的事实是可怕的，我需要一种方法来解决它。
是的，菜单是一个锚标签列表，需要关注可访问性问题。然后菜单完全显示在视图中，但是将鼠标移动到可滚动 div 边缘附近的行为会导致浏览器认为它应该为我滚动它。

【解决方案3】：

如果您没有 overflow: scroll 而是使用 overflow: hidden 并提供允许用户在必要时滚动的向上/向下滚动按钮怎么办？当然可以轻松禁用这些按钮。

【讨论】：

隐藏溢出的对象在我的情况下仍然会滚动。尝试创建一个具有隐藏溢出的 div，它的大小很小但包含很多文本。您仍然可以使用鼠标滚轮或在选择文本时单击并拖动来滚动该框。
你必须阻止 onscroll 事件的Default() 等。我想:)

【解决方案4】：

虽然它可能不是您正在寻找的答案，但如果您要在页面加载（从服务器）时将 div 的显示值设置为“none”，然后将事件连接到页面加载（ ajax.net 中的 pageLoad 或通过 javascript 将其附加到 onload 事件），这将使 div 显示设置为 'block' .. 这将确保较慢的浏览器不会看到 div '跳跃'（甚至可以放一个在 div 中“加载”图像以向用户显示它正在做某事而不仅仅是不可见）

抱歉，我无法提供更复杂/流畅的解决方案。

【讨论】：

【解决方案5】：

我找到了解决此问题的方法。通过从可滚动的 div 中删除菜单元素，然后将其直接附加到 document.body，浏览器都停止尝试滚动 div 以显示焦点元素（即使该元素已经完全可见）。

感谢大家的宝贵时间和回答！

【讨论】：