如果悬停div，则停止滚动页面 [英] Stop page from scrolling if hovering div

问题描述

我有一个div是可滚动的，但每当你到达底部/顶部，它开始滚动整个页面。

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.

我已经尝试通过添加CSS当我悬停div ...

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

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.

推荐答案

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

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

更新：代码已更新，可在IE9 +中正常使用。

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

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

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">
  <!-- A bunch of HTML here which will create scrolling -->
</div>

要禁用的jQuery是：

The jQuery to disable is:

$('.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 = ）。如果 mousewheel 事件的请求 delta 将移动滚动超过 top < div> 的$ c>或底部，取消活动。

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 delta of the mousewheel event would move scrolling past the top or bottom of the <div>, cancel the event.

在IE中，特别是滚动事件，经过一个子元素的可滚动区域，然后滚动到父元素，滚动继续，不管事件被取消。因为我们在任何情况下取消事件，然后通过jQuery控制子对象的滚动，这是被阻止的。

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.

这是松散地基于这个问题解决了问题，但不需要插件，并且跨浏览器兼容IE9 +。

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

这里是一个工作的jsFiddle 演示代码在行动。

Here is a working jsFiddle demonstrating the code in-action.

这是一个工作的jsFiddle 演示

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

这里是一个工作的jsFiddle 演示代码在行动，并更新以使用IE和FireFox。有关更改必要性的详情，请参见此帖。

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

这篇关于如果悬停div，则停止滚动页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！