0

这是我目前的情况：

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

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

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

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

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

然后，我认为由于我的代码在对象滚动后运行，我可以重置obj.scrollTop和obj.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 回答