以下是我目前的情况:
我有一个包含几个可滚动div的网页。每个div都包含许多对象。我正在使用YUI来显示可以对每个对象执行的操作的弹出菜单。每个对象都有自己的与之关联的菜单,它是动态构造和显示的。弹出菜单可能很大,并且可以与可滚动div的边界重叠。
从我认为的焦点问题(菜单必须是可访问的),当我将鼠标悬停在位于可滚动div的边缘顶部的动作上时,div会自动滚动,移动内容但离开菜单固定。尝试在发生这种情况时动态移动菜单并不是我想做的事情,因为我认为它会提供糟糕的用户体验。
所以我需要阻止这个聚焦菜单滚动div。我提供最佳用户界面的想法是防止这些内部div在菜单打开时滚动。这使菜单位于最佳位置,以向用户显示正在对哪个项目进行操作。如果用户想要滚动框,他们可以单击关闭菜单然后正常滚动。
我该怎么做?我需要一个适用于主流浏览器的解决方案。
我的第一个想法是听取该特定元素的 onscroll 事件。不幸的是,似乎没有一种简单的方法可以防止滚动发生。首先,我的Javascript事件代码似乎在实际滚动发生后执行。
然后,我认为由于我的代码在对象滚动后运行,我可以重置 obj.scrollTop 和 obj.scrollLeft 。果然,这似乎有效,但我担心在慢速浏览器上,用户会看到div内的内容“跳转”。此外,如果元素滚动的数量是事件对象的一部分,那将是非常好的。它被困在某处吗?我正在寻找一种替代方法,必须为此元素存储scrollTop和scrollLeft变量,然后在暂时禁用滚动时使用它们。
解决这整个问题的最佳方法是什么?
答案 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以显示聚焦元素(即使元素已经完全可见)。
感谢您的所有时间和答案!