Question

我有一个可滚动的div，但无论何时到达它的底部/顶部，它都会开始滚动整个页面。这对于快速滚动的用户来说可能很烦人，然后整个页面开始意外滚动。

我需要一些东西，如果你将鼠标悬停在div上，页面就不能滚动。

我在悬停div时添加了CSS尝试了这个...

body {
    overflow:hidden;
}

......它有效，但有一个问题。滚动条消失，看起来有点愚蠢，让它消失/重新出现。有什么方法可以达到相同的效果，但保持滚动条可见？我已经看到它与Facebook聊天完成了。

Answer 1

这是一种非常简单的方法来阻止传播，没有插件，只需jQuery。

更新：代码已更新，可在IE9 +中正常使用。尚未在以前的版本中进行测试。

首先，在<div>上创建一个类，将其标记为具有此行为。在我的示例中，我使用了类.Scrollable。

<div class="Scrollable">
  <!-- A bunch of HTML here which will create scrolling -->
</div>

要禁用的jQuery是：

$('.Scrollable').on('DOMMouseScroll mousewheel', function(ev) {
    var $this = $(this),
        scrollTop = this.scrollTop,
        scrollHeight = this.scrollHeight,
        height = $this.height(),
        delta = (ev.type == 'DOMMouseScroll' ?
            ev.originalEvent.detail * -40 :
            ev.originalEvent.wheelDelta),
        up = delta > 0;

    var prevent = function() {
        ev.stopPropagation();
        ev.preventDefault();
        ev.returnValue = false;
        return false;
    }

    if (!up && -delta > scrollHeight - height - scrollTop) {
        // Scrolling down, but this will take us past the bottom.
        $this.scrollTop(scrollHeight);
        return prevent();
    } else if (up && delta > scrollTop) {
        // Scrolling up, but this will take us past the top.
        $this.scrollTop(0);
        return prevent();
    }
});

实质上，这样做是为了检测请求滚动的方向（基于originalEvent.wheelDelta：positive = up，negative = down）。如果delta事件的请求的mousewheel移动滚动到top的{{1}}或bottom，则取消该事件。

在IE中，尤其是滚动事件经过子元素的可滚动区域然后滚动到父元素，并且无论事件被取消，滚动都会继续。因为我们在任何情况下取消事件，然后通过jQuery控制子项的滚动，这是有效的。

这基于this question解决问题的方式，但不需要插件，并且符合IE9 +的跨浏览器。

~~Here is a working jsFiddle演示代码在行动。~~

~~Here is a working jsFiddle演示代码在行动中，并更新为与IE合作。~~

Here is a working jsFiddle演示代码在行动中，并更新为与IE和FireFox一起使用。有关更改必要性的详细信息，请参阅this post。

Answer 2

可能会看看

How to disable scrolling temporarily?

这是停止并激活滚动的示例

如果悬停div，则停止滚动页面

2 个答案: