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;
});

Demo

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应答编辑器需要这个！

<强>更新

我认为这样做更好，因为它根本没有尝试操纵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方面效果很好，比其他解决方案简单得多......让我知道它在其他地方的表现如何......

FIDDLE

Answer 4

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

E.g。 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>

看到它在this sample fiddle中工作，并将其与this sample fiddle进行比较，后者的侧边栏鼠标离开行为略有不同。

另见scroll only one particular div with browser's main scrollbar。

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

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

$ firebase login --no-localhost

Answer 8

您可以通过执行此类操作来停用整个页面的滚动但显示滚动条！

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

Answer 9

$this.find('.scrollingDiv').on('mousewheel DOMMouseScroll', function (e) {
  var delta = -e.originalEvent.wheelDelta || e.originalEvent.detail;
  var scrollTop = this.scrollTop;
  if((delta < 0 && scrollTop === 0) || (delta > 0 && this.scrollHeight - this.clientHeight - scrollTop === 0)) {
    e.preventDefault();
  }
});

Answer 10

如果输入选择器元素，

将禁用窗口上的滚动。像魅力一样工作。

Answer 11

根据ceed的回答，这是一个允许嵌套滚动保护元素的版本。只有鼠标结束的元素才会滚动，并且滚动非常顺畅。这个版本也是可重入的。它可以在同一个元素上多次使用，并将正确删除并重新安装处理程序。

jQuery.fn.scrollGuard = function() {
    this
        .addClass('scroll-guarding')
        .off('.scrollGuard').on('mouseenter.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g[0].myCst = $g.scrollTop();
            $g[0].myCsl = $g.scrollLeft();
            $g.off("scroll.prevent").on("scroll.prevent", function() {
                $g.scrollTop($g[0].myCst);
                $g.scrollLeft($g[0].myCsl);
            });
        })
        .on('mouseleave.scrollGuard', function() {
            var $g = $(this).parent().closest('.scroll-guarding');
            $g = $g.length ? $g : $(window);
            $g.off("scroll.prevent");
        });
};

一种简单的方法是将一个类（例如scroll-guard）添加到页面中允许滚动的所有元素。然后使用$('.scroll-guard').scrollGuard()来保护他们。

Answer 12

如果您应用overflow: hidden样式，它应该消失

编辑：实际上我读错了你的问题，只会隐藏滚动条，但我不认为这是你想要的。

Answer 13

我无法获得在Chrome和Firefox中运行的任何答案，因此我提出了这种合并：

$someElement.on('mousewheel DOMMouseScroll', scrollProtection);

function scrollProtection(event) {
    var $this = $(this);
    event = event.originalEvent;
    var direction = (event.wheelDelta * -1) || (event.detail);
    if (direction < 0) {
        if ($this.scrollTop() <= 0) {
            return false;
        }
    } else {
        if ($this.scrollTop() + $this.innerHeight() >= $this[0].scrollHeight) {
            return false;
        }
    }
}

Answer 14

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

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

14 个答案: