0

这是我目前的情况:

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

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

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

我怎样才能做到这一点?我需要一个适用于主流浏览器的解决方案。

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

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

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

4

5 回答 5

3

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

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

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

不过,主要答案仍然正确。听起来好像焦点将变为矩形(可能是锚?),它没有完全显示并导致滚动。这个矩形必须获得焦点是否有原因?为了可访问性?

于 2009-03-20T18:35:13.963 回答
3

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

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

于 2009-03-20T18:39:15.670 回答
0

如果您没有使用overflow: scroll而是使用了overflow: hidden并提供了向上/向下滚动按钮,允许用户在必要时滚动怎么办?这些按钮当然可以很容易地禁用。

于 2009-03-20T18:36:17.097 回答
0

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

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

于 2009-03-20T18:36:23.850 回答
0

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

感谢大家的时间和答案!

于 2009-03-20T20:49:46.963 回答