如何暂时阻止可滚动的div滚动?

时间:2009-03-20 18:28:24

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

以下是我目前的情况:

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

从我认为的焦点问题(菜单必须是可访问的),当我将鼠标悬停在位于可滚动div的边缘顶部的动作上时,div会自动滚动,移动内容但离开菜单固定。尝试在发生这种情况时动态移动菜单并不是我想做的事情,因为我认为它会提供糟糕的用户体验。

所以我需要阻止这个聚焦菜单滚动div。我提供最佳用户界面的想法是防止这些内部div在菜单打开时滚动。这使菜单位于最佳位置,以向用户显示正在对哪个项目进行操作。如果用户想要滚动框,他们可以单击关闭菜单然后正常滚动。

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

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

然后,我认为由于我的代码在对象滚动后运行,我可以重置 obj.scrollTop obj.scrollLeft 。果然,这似乎有效,但我担心在慢速浏览器上,用户会看到div内的内容“跳转”。此外,如果元素滚动的数量是事件对象的一部分,那将是非常好的。它被困在某处吗?我正在寻找一种替代方法,必须为此元素存储scrollTop和scrollLeft变量,然后在暂时禁用滚动时使用它们。

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

5 个答案:

答案 0 :(得分:3)

简单的答案是不,你不能这样做。如果你想要一个跨浏览器的解决方案,它就是双重的。

为用户提供可以滚动内容的清晰可用性,然后拒绝这些只是简单的糟糕UI设计。

好的,所以在你编辑之后,事实证明你实际上并没有试图阻止用户滚动。

但主要答案仍然是正确的。听起来好像焦点是矩形(可能是一个锚?),它不完全在视野中并导致滚动。这个矩形必须得到焦点是否有原因?对于辅助功能?

答案 1 :(得分:3)

我同意安东尼关于你试图禁止的功能的介绍。如果您要禁用滚动,那么您应该在视觉上禁用或删除页面的那一部分。

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

答案 2 :(得分:0)

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

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

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

感谢您的所有时间和答案!