当鼠标悬停在绝对 div 上时，jQuery 禁用滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7571370/
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
jQuery disable scroll when mouse over an absolute div
提问by user398341
I'm trying to disable the window mouse scroll functionality when the mouse is hovering over the div - so that only div scrolling is enabled - and when mouse moves away from the div - scrolling to the window is applied again. The div is positioned absolutely.
当鼠标悬停在 div 上时，我试图禁用窗口鼠标滚动功能 - 以便仅启用 div 滚动 - 当鼠标移离 div 时 - 再次应用滚动到窗口。div 是绝对定位的。
I've seen this post use jquery to disable mouse scroll wheel function when the mouse cursor is inside a div?but it doesn't seem to provide any answer - hence my question.
我看过这篇文章，当鼠标光标位于 div 内时，使用 jquery 禁用鼠标滚轮功能？但它似乎没有提供任何答案 - 因此我的问题。
I'm assuming it would be something like this (if only these methods existed):
我假设它会是这样的（如果只有这些方法存在）：
$('#container').hover(function() {
$(window).scroll().disable();
$(this).scroll().enable();
}, function() {
$(window).scroll().enable();
});
回答by mrtsherman
This has been a popular question so I am updating to give an overview of the answers provided here and which may be best for you. There are three unique solutions included. Two are from Amos and one is from myself. However, each operates differently.
这是一个受欢迎的问题，所以我正在更新以概述此处提供的答案，哪些可能最适合您。包括三种独特的解决方案。两个来自阿莫斯，一个来自我自己。然而，每个人的运作方式不同。
- Amos - Set
overflow:hiddenon body. This is simple and works great. But the main window's scrollbars will flash in and out. - Amos - Use javascript to disable mouse wheel. This is great if you don't need mousewheel at all.
- This answer - Use javascript to scroll only the element you are over. This is the best answer if your inner div needs to scroll, but you don't want any other divs to scroll. The example fiddle showcases this.
- Amos - 设置
overflow:hidden在身体上。这很简单，效果很好。但是主窗口的滚动条会闪烁进出。 - Amos - 使用 javascript 禁用鼠标滚轮。如果您根本不需要鼠标滚轮，这很好。
- 这个答案 - 使用 javascript 仅滚动您结束的元素。如果您的内部 div 需要滚动，但您不希望任何其他 div 滚动，这是最佳答案。示例小提琴展示了这一点。
http://jsfiddle.net/eXQf3/371/
http://jsfiddle.net/eXQf3/371/
The code works as follows:
该代码的工作原理如下：
- Catch scroll event on the current element
- Cancel the scroll event
- Manually scroll the current element only
- 在当前元素上捕获滚动事件
- 取消滚动事件
- 仅手动滚动当前元素
$('#abs').bind('mousewheel DOMMouseScroll', function(e) {
var scrollTo = null;
if (e.type == 'mousewheel') {
scrollTo = (e.originalEvent.wheelDelta * -1);
}
else if (e.type == 'DOMMouseScroll') {
scrollTo = 40 * e.originalEvent.detail;
}
if (scrollTo) {
e.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
});?
Changelog:
变更日志：
- FF support
- scrollTo null check to revert to default behavior in case something unforeseen happens
- support for jQuery 1.7.
- FF支持
- scrollTo null 检查以恢复默认行为，以防发生不可预见的事情
- 支持 jQuery 1.7。
回答by amosrivera
You cannot disable window scroll, there is a simple workaround though:
您不能禁用窗口滚动，但有一个简单的解决方法：
//set the overflow to hidden to make scrollbars disappear
$('#container').hover(function() {
$("body").css("overflow","hidden");
}, function() {
$("body").css("overflow","auto");
});
See demo:http://jsfiddle.net/9Htjw/
见演示：http : //jsfiddle.net/9Htjw/
UPDATE
更新
You can disable the mouse wheel though.
不过，您可以禁用鼠标滚轮。
$('#container').hover(function() {
$(document).bind('mousewheel DOMMouseScroll',function(){
stopWheel();
});
}, function() {
$(document).unbind('mousewheel DOMMouseScroll');
});
function stopWheel(e){
if(!e){ /* IE7, IE8, Chrome, Safari */
e = window.event;
}
if(e.preventDefault) { /* Chrome, Safari, Firefox */
e.preventDefault();
}
e.returnValue = false; /* IE7, IE8 */
}
Source:http://solidlystated.com/scripting/javascript-disable-mouse-wheel/
来源：http : //solidlystated.com/scripting/javascript-disable-mouse-wheel/
回答by rocky
mrtsherman: if you bind the event like this, amosrivera's code works also for firefox:
mrtsherman：如果你像这样绑定事件，amosrivera 的代码也适用于 Firefox：
var elem = document.getElementById ("container");
if (elem.addEventListener) {
elem.addEventListener ("mousewheel", stopWheel, false);
elem.addEventListener ("DOMMouseScroll", stopWheel, false);
}
else {
if (elem.attachEvent) {
elem.attachEvent ("onmousewheel", stopWheel);
}
}
回答by MjolTonir
What I'm trying to do here with my code is:
我在这里尝试用我的代码做的是：
Check if div is hovered over or moused over
Get the scroll direction
Compare the ScrollTop with the Height of the container and prevent further scroll when max or min is reached(until moused is out).
var hovered_over = false; var hovered_control; function onCrtlMouseEnter(crtl) { //Had same thing used for mutliple controls hovered_over = true; //could be replaced with $(control).onmouseenter(); etc hovered_control = crtl; //you name it } function onCrtlMouseLeave(crtl) { hovered_over = false; hovered_control = null; } $(document).on("mousewheel",function(e) { if (hovered_over == true) { var control = $(hovered_control); //get control var direction = e.originalEvent.wheelDeltaY; //get direction of scroll if (direction < 0) { if ((control.scrollHeight - control.clientHeight) == control.scrollTop) { return false; //reached max downwards scroll... prevent; } } else if (direction > 0) { if (control.scrollTop == 0) { return false; //reached max upwards scroll... prevent; } } } });
检查 div 是否悬停或鼠标悬停
获取滚动方向
将 ScrollTop 与容器的高度进行比较，并在达到 max 或 min 时阻止进一步滚动（直到 moused 消失）。
var hovered_over = false; var hovered_control; function onCrtlMouseEnter(crtl) { //Had same thing used for mutliple controls hovered_over = true; //could be replaced with $(control).onmouseenter(); etc hovered_control = crtl; //you name it } function onCrtlMouseLeave(crtl) { hovered_over = false; hovered_control = null; } $(document).on("mousewheel",function(e) { if (hovered_over == true) { var control = $(hovered_control); //get control var direction = e.originalEvent.wheelDeltaY; //get direction of scroll if (direction < 0) { if ((control.scrollHeight - control.clientHeight) == control.scrollTop) { return false; //reached max downwards scroll... prevent; } } else if (direction > 0) { if (control.scrollTop == 0) { return false; //reached max upwards scroll... prevent; } } } });
http://jsfiddle.net/Miotonir/4uw0vra5/1/
http://jsfiddle.net/Miotonir/4uw0vra5/1/
Probably not the cleanest code and it can be improved upon easily, but this works for me.
(control.scrollHeight - control.clientHeight)this part is kindoff questionable for me , but you should get the idea how to approach the problem anyways.
可能不是最干净的代码，可以轻松改进，但这对我有用。
(control.scrollHeight - control.clientHeight)这部分对我来说有点问题，但无论如何你应该知道如何解决这个问题。
回答by Lasithds
I used nicescroll on my page no method worked. I realized the nicescroller is calling the scroll event and had to temporarily disable nicescroll when hovering the element.
我在我的页面上使用了 nicescroll 没有任何方法有效。我意识到 nicescroller 正在调用滚动事件，并且在悬停元素时必须暂时禁用 nicescroll。
Solution: Temporarily disable nicescroll when hovering an element
解决方案：悬停元素时暂时禁用 nicescroll
$('body').on('mouseover', '#element', function() {
$('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
$('body, html').css('overflow', 'hidden').niceScroll();
});
回答by Max Bileschi
@mrtsherman's Answer almost worked for me, but there was a breaking change with passive scrolling in Chrome.
@mrtsherman 的回答几乎对我有用，但是Chrome 中的被动滚动发生了重大变化。
preventScrollingEl = document.getElementById("WHATEVER");
preventScrollingEl.addEventListener('mousewheel', preventScrolling, {passive: false});
preventScrollingEl.addEventListener('DOMMouseScroll', preventScrolling, {passive: false});
function preventScrolling(event) {
var scrollTo = null;
if (event.type == 'mousewheel') {
scrollTo = (event.wheelDelta * -1);
} else if (event.type == 'DOMMouseScroll') {
scrollTo = 40 * event.detail;
}
if (scrollTo) {
event.preventDefault();
$(this).scrollTop(scrollTo + $(this).scrollTop());
}
}
