代码之家 › 专栏 › 技术社区 › Sebastian Celis

如何临时阻止可滚动的DIV滚动?

event-handling javascript-events events html javascript

0

Sebastian Celis · 技术社区 · 16 年前

这是我目前的情况:

我有一个网页,里面有几个可滚动的分隔符。每个div都包含许多对象。我正在使用yui显示可以在每个对象上执行的操作的弹出菜单。每个对象都有自己的关联菜单,这些菜单是动态构造和显示的。弹出菜单可以很大,并且可以覆盖可滚动分区的边界。

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

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

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

我的第一个想法是听滚动特定元素的事件。不幸的是,似乎没有一种简单的方法来阻止滚动的发生。首先,我的javascript事件代码会在实际滚动发生后执行。

然后,我想既然我的代码是在对象滚动之后运行的,我可以重新设置 斯科洛托普 和 向左滚动 . 当然,这似乎是可行的,尽管我担心在浏览器速度慢的情况下,用户会看到DIV“跳转”中的内容。另外,如果元素滚动的量是事件对象的一部分,那就太好了。它是卡在那里的什么地方吗?我正在寻找一种替代方法,来存储这个元素的Scrolltop和ScrollLeft变量,然后在暂时禁用滚动时使用它们。

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

5 回复 | 直到 16 年前

1

3

Welbog 16 年前

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

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

2

3

AnthonyWJones 16 年前

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

~~为用户提供了清晰的负担,即某些东西可以滚动,然后否认它们只是简单的糟糕的用户界面设计。~~

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

但主要的答案仍然是正确的。听起来好像焦点是矩形的(可能是锚?)这不是完全在视图中,并导致滚动。这个矩形必须获得焦点有什么原因吗?为了方便使用?

3

0

Eric Wendelin 16 年前

如果你没有呢 溢出:滚动 而你却用 溢出:隐藏 并且提供了向上/向下滚动按钮,允许用户在必要时滚动?当然,这些按钮很容易被禁用。

4

0

John West 16 年前

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

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

5

0

Sebastian Celis 16 年前

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

感谢大家的时间和回答!