Javascript 滚动子 div 滚动窗口，我该如何停止？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10211203/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scrolling child div scrolls the window, how do I stop that?
提问by Jeevan
I have a div, with a scroll bar, When it reaches the end, my page starts scrolling. Is there anyway I can stop this behavior ?
我有一个带有滚动条的 div，当它到达末尾时，我的页面开始滚动。无论如何我可以阻止这种行为吗？
采纳答案by Jeevan
Found the solution.
找到了解决办法。
This is what I needed.
这就是我所需要的。
And this is the code.
这是代码。
http://jsbin.com/itajok/edit#javascript,html
http://jsbin.com/itajok/edit#javascript,html
Uses a jQuery Plug-in.
使用 jQuery 插件。
Update due to deprecation notice
由于弃用通知而更新
From jquery-mousewheel:
The old behavior of adding three arguments (
delta,deltaX, anddeltaY) to the event handler is now deprecated and will be removed in later releases.
向事件处理程序添加三个参数（
delta、deltaX、 和deltaY）的旧行为现在已弃用，并将在以后的版本中删除。
Then, event.deltaYmust now be used:
那么，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;
});
回答by Teemu
You can inactivate the scrolling of the whole page by doing something like this:
您可以通过执行以下操作来停用整个页面的滚动：
<div onmouseover="document.body.style.overflow='hidden';" onmouseout="document.body.style.overflow='auto';"></div>
回答by robisrob
The selected solution is a work of art. Thought it was worthy of a plugin....
所选的解决方案是一件艺术品。认为它值得一个插件......
$.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();
});
};
This has been an ongoing inconvenience for me and this solution is so clean compared to other hacks I've seen. Curious to know how more about how it works and how widely supported it would be, but cheers to Jeevan and whoever originally came up with this. BTW - stackoverflow answer editor needs this!
这对我来说一直是一个不便，与我见过的其他黑客相比，这个解决方案非常干净。很想知道它是如何工作的以及它会得到多广泛的支持，但是为 Jeevan 和最初提出这个的人欢呼。顺便说一句 - stackoverflow 答案编辑器需要这个！
UPDATE
更新
I believe this is better in that it doesn't try to manipulate the DOM at all, only prevents bubbling conditionally...
我相信这更好，因为它根本不尝试操作 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);
}
})
;
};
Works great in chrome and much simpler than other solutions... let me know how it fares elsewhere...
在 chrome 中效果很好，比其他解决方案简单得多……让我知道它在其他地方的表现……
回答by joe92
You could use a mouseover event on the div to disable the body scrollbar and then a mouseout event to activate it again?
您可以在 div 上使用 mouseover 事件禁用主体滚动条，然后使用 mouseout 事件再次激活它？
E.g. The HTML
例如 HTML
<div onmouseover="disableBodyScroll();" onmouseout="enableBodyScroll();">
content
</div>
And then the javascript like so:
然后像这样的javascript：
var body = document.getElementsByTagName('body')[0];
function disableBodyScroll() {
body.style.overflowY = 'hidden';
}
function enableBodyScroll() {
body.style.overflowY = 'auto';
}
回答by Alex Golovin
I wrote resolving for this issue
我写了解决这个问题
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);
回答by Patrick Matte
Here's a cross-browser way to do this on the Y axis, it works on desktop and mobile. Tested on OSX and iOS.
这是在 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();
}
}, {passive:false});
scrollArea.addEventListener("touchstart", function(event) {
this.previousClientY = event.touches[0].clientY;
}, {passive:false});
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;
}, {passive:false});
回答by NGLN
If I understand your question correctly, then you want to prevent scrolling of the main content when the mouse is over a div (let's say a sidebar). For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.
如果我正确理解您的问题，那么您希望在鼠标悬停在 div 上时防止滚动主要内容（比如说侧边栏）。为此，侧边栏可能不是主要内容（即浏览器窗口）的滚动容器的子项，以防止滚动事件冒泡到其父项。
This possibly requires some markup changes in the following manner:
这可能需要按以下方式进行一些标记更改：
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
See it's working in this sample fiddleand compare that with this sample fiddlewhich has a slightly different mouse leave behavior of the sidebar.
看到它在这个示例小提琴中工作，并将它与这个示例小提琴进行比较，它的侧边栏的鼠标离开行为略有不同。
See also scroll only one particular div with browser's main scrollbar.
回答by Andriy Stolyar
回答by ceed
this disables the scrolling on the window if you enter the selector element. works like charms.
如果您输入选择器元素，这将禁用窗口上的滚动。像魅力一样工作。
elements = $(".selector");
elements.on('mouseenter', function() {
window.currentScrollTop = $(window).scrollTop();
window.currentScrollLeft = $(window).scrollTop();
$(window).on("scroll.prevent", function() {
$(window).scrollTop(window.currentScrollTop);
$(window).scrollLeft(window.currentScrollLeft);
});
});
elements.on('mouseleave', function() {
$(window).off("scroll.prevent");
});
回答by Neil Taylor
$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();
}
});
