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

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或bottom的<div>,取消该事件.

在IE中,尤其是滚动事件经过子元素的可滚动区域然后滚动到父元素,并且滚动继续,而不管事件被取消.因为我们在任何情况下取消事件,然后通过jQuery控制子项的滚动,这是被阻止的.

这是基于这个问题解决问题的方式,但不需要插件,并且与IE9 +交叉浏览器兼容.

这是一个有效的jsFiddle演示代码在行动.

这是一个有效的jsFiddle演示代码在行动,并更新与IE一起工作.

这是一个有效的jsFiddle演示代码在行动,并更新为使用IE和FireFox.有关更改必要性的更多详细信息,请参阅此文章.