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

Stop page from scrolling if hovering div

提问by TJE

I have a div that is scrollable, but whenever you reach the bottom/top of it, it begins to scroll the entire page. That could be annoying for users who scroll fast, and then the entire page starts scrolling unexpectedly.

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

I need something where if you are hovering over the div, the page is not scrollable.

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

I have tried this by adding CSS when I hover the div...

我通过在悬停 div 时添加 CSS 来尝试过这个...

body {
    overflow:hidden;
}

...It works but there is one problem. The scrollbar disappears and that looks kind of stupid to have it disappearing/reappearing. Any way to achieve the same effect but keep the scrollbar visible? I have seen it done with Facebook chat.

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

回答by Troy Alford

Here is a very simple way to stop the propagation with no plugins, just jQuery.

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

Update: The code has been updated to work correctly in IE9+. Have not tested in previous versions.

更新：代码已更新，可在 IE9+ 中正常工作。在之前的版本中没有测试过。

First, create a class on your <div>to mark it as having this behavior. In my example, I use the class .Scrollable.

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

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

The jQuery to disable is:

要禁用的 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();
    }
});

In essence, what this does is to detect which direction the scrolling is being requested in (based on the originalEvent.wheelDelta: positive = up, negative = down). If the requested deltaof the mousewheelevent would move scrolling past the topor bottomof the <div>, cancel the event.

本质上，它的作用是检测请求滚动的方向（基于originalEvent.wheelDelta: positive = up, negative = down）。如果请求delta的的mousewheel事件将移动滚动过去的top或bottom的<div>，取消该事件。

In IE, especially, scrolling events which go past a child element's scrollable area then roll up to parent elements, and the scrolling continues regardless of the event being canceled. Because we cancel the event in any case, and then control the scrolling on the child through jQuery, this is prevented.

特别是在 IE 中，滚动事件越过子元素的可滚动区域，然后滚动到父元素，无论事件被取消，滚动都会继续。因为我们在任何情况下都取消了事件，然后通过 jQuery 控制子级上的滚动，这样就被阻止了。

This is loosely based on the way that this questionsolves the problem, but does not require the plugin, and is cross-browser compliant with IE9+.

这大致基于此问题解决问题的方式，但不需要插件，并且跨浏览器兼容 IE9+。

Here is a working jsFiddledemonstrating the code in-action.

这是一个正在运行的 jsFiddle演示代码。

Here is a working jsFiddledemonstrating the code in-action, and updated to work with IE.

这是一个有效的 jsFiddle，演示了正在运行的代码，并已更新以与 IE 一起使用。

Here is a working jsFiddledemonstrating the code in-action, and updated to work with IE and FireFox. See this postfor more details about the necessity of the changes.

这是一个有效的 jsFiddle，演示了正在运行的代码，并更新为可与 IE 和 FireFox 一起使用。有关更改必要性的更多详细信息，请参阅此帖子。

回答by TJE

maybe have a look to

也许看看

How to disable scrolling temporarily?

如何暂时禁用滚动？

This is a sample to stop and activate scroll

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