我有一个带有滚动条的 div，当它到达末尾时，我的页面开始滚动。无论如何我可以阻止这种行为吗？
滚动子 div 滚动窗口，我该如何停止？
IT技术
javascript
html
2021-03-17 12:12:48
6个回答
您可以通过执行以下操作来停用整个页面的滚动：
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
找到了解决办法。
这就是我所需要的。
这是代码。
http://jsbin.com/itajok/edit#javascript,html
使用 jQuery 插件。
由于弃用通知而更新
向事件处理程序添加三个参数（
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;
});
所选的解决方案是一件艺术品。认为它值得一个插件......
$.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 和最初提出这个的人欢呼。顺便说一句 - 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 中效果很好，比其他解决方案简单得多……让我知道它在其他地方的表现……
您可以在 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';
}
正如这里所回答的，大多数现代浏览器现在都支持overscroll-behavior: none;CSS 属性，以防止滚动链接。就是这样，只有一行！