滚动子div滚动窗口,我该如何阻止？

Question

我有一个div,带有滚动条,当它到达结尾时,我的页面开始滚动.无论如何我可以阻止这种行为吗？

Answer 1

您可以通过执行以下操作来停用整个页面的滚动:

<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>

Answer 2

找到了解决方案.

http://jsbin.com/itajok

这就是我需要的.

这是代码.

http://jsbin.com/itajok/edit#javascript,html

使用jQuery插件.

因弃用通知而更新

来自jquery-mousewheel:

现在不推荐将三个参数(delta,deltaX和deltaY)添加到事件处理程序的旧行为,并将在以后的版本中删除.

然后,event.deltaY现在必须使用:

var toolbox = $('#toolbox'),
    height = toolbox.height(),
    scrollHeight = toolbox.get(0).scrollHeight;

toolbox.off("mousewheel").on("mousewheel", function (event) {
  var blockScrolling = this.scrollTop === scrollHeight - height && event.deltaY < 0 || this.scrollTop === 0 && event.deltaY > 0;
  return !blockScrolling;
});

演示

Answer 3

所选择的解决方案是一件艺术品.认为它值得一个插件....

$.fn.scrollGuard = function() {
    return this
        .on( 'wheel', function ( e ) {
            var event = e.originalEvent;
            var d = event.wheelDelta || -event.detail;
            this.scrollTop += ( d < 0 ? 1 : -1 ) * 30;
            e.preventDefault();
        });
};    

这对我来说一直是一个持续的不便,与我见过的其他黑客相比,这个解决方案非常干净.很想知道它是如何工作的,以及它将得到多大程度的支持,但为Jeevan和最初想出这个的人欢呼.BTW - stackoverflow应答编辑器需要这个!

UPDATE

我相信这更好,因为它根本不会试图操纵DOM,只能有条件地阻止冒泡......

$.fn.scrollGuard2 = function() {
  return this
    .on( 'wheel', function ( e ) {
      var $this = $(this);
      if (e.originalEvent.deltaY < 0) {
        /* scrolling up */
        return ($this.scrollTop() > 0);
      } else {
        /* scrolling down */
        return ($this.scrollTop() + $this.innerHeight() < $this[0].scrollHeight);
      }
    })
  ;
};    

在Chrome方面效果很好,比其他解决方案简单得多......让我知道它在其他地方的表现如何......

小提琴

Answer 4

您可以在div上使用mouseover事件来禁用正文滚动条,然后再使用mouseout事件再次激活它？

例如HTML

<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
    content
</div>

然后是这样的javascript:

var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
    body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
    body.style.overflowY = 'auto';
}

Answer 5

如果我正确理解你的问题,那么你想要在鼠标悬停在div上时阻止滚动主要内容(让我们说侧边栏).为此,侧边栏可能不是主内容(即浏览器窗口)的滚动容器的子节点,以防止滚动事件冒泡到其父节点.

这可能需要以下列方式进行一些标记更改:

<div id="wrapper"> 
    <div id="content"> 
    </div> 
</div> 
<div id="sidebar"> 
</div> 

看到它在这个样本小提琴中工作,并将其与此样本小提琴进行比较,该小提琴具有与侧边栏略有不同的鼠标离开行为.

另请参阅使用浏览器的主滚动条仅滚动一个特定div.

Answer 6

我为这个问题写了解决方案

  var div;
  div = document.getElementsByClassName('selector')[0];

  div.addEventListener('mousewheel', function(e) {
    if (div.clientHeight + div.scrollTop + e.deltaY >= div.scrollHeight) {
      e.preventDefault();
      div.scrollTop = div.scrollHeight;
    } else if (div.scrollTop + e.deltaY <= 0) {
      e.preventDefault();
      div.scrollTop = 0;
    }
  }, false);

Answer 7

正如这里所回答的，大多数现代浏览器现在都支持overscroll-behavior: none;CSS 属性，以防止滚动链接。就是这样，只有一行！

Answer 8

这是一种跨浏览器的方式，可以在Y轴上执行此操作，它适用于台式机和移动设备。在OSX和iOS上测试。

var scrollArea = this.querySelector(".scroll-area");
scrollArea.addEventListener("wheel", function() {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var deltaY = event.deltaY;
    if ( (scrollTop === maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
});

scrollArea.addEventListener("touchstart", function(event) {
    this.previousClientY = event.touches[0].clientY;
});

scrollArea.addEventListener("touchmove", function(event) {
    var scrollTop = this.scrollTop;
    var maxScroll = this.scrollHeight - this.offsetHeight;
    var currentClientY = event.touches[0].clientY;
    var deltaY = this.previousClientY - currentClientY;
    if ( (scrollTop === maxScroll && deltaY > 0) || (scrollTop === 0 && deltaY < 0) ) {
        event.preventDefault();
    }
    this.previousClientY = currentClientY;
});