当鼠标hover在绝对div上时，jQuery禁用滚动
我试图禁用鼠标hover在div上的窗口鼠标滚动function – 以便只有div滚动启用 – 当鼠标移离div – 滚动到窗口再次应用。 div绝对定位。
我见过这个post使用jquery禁用鼠标滚轮function，当鼠标光标在一个div内？ 但似乎没有提供任何答案 – 因此我的问题。
我假设它会是这样的（如果只有这些方法存在）：
$('#container').hover(function() { $(window).scroll().disable(); $(this).scroll().enable(); }, function() { $(window).scroll().enable(); }); 这是一个受欢迎的问题，所以我正在更新，以概述在这里提供的答案，哪些可能是最适合你的。 包括三个独特的解决scheme。 两个来自阿莫斯，一个来自我自己。 但是，每个操作不同。
- 阿莫斯 – 设置
overflow:hidden在身上。 这很简单，效果很好。 但主窗口的滚动条会闪烁。 - 阿莫斯 – 使用JavaScript来禁用鼠标滚轮。 如果你根本不需要鼠标滚轮，这真是太好了。
- 这个答案 – 使用JavaScript滚动只是你已经结束的元素。 如果你的内部div需要滚动，这是最好的答案，但你不希望任何其他div滚动。 示例小提琴展示了这一点。
http://jsfiddle.net/eXQf3/371/
代码工作如下：
- 捕捉当前元素上的滚动事件
- 取消滚动事件
- 手动只滚动当前元素
$('#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()); } });
更新日志：
- FF支持
- scrollTo null检查以恢复默认行为，以防万一发生不可预见的情况
- 支持jQuery 1.7。
您不能禁用窗口滚动，但有一个简单的解决方法：
//set the overflow to hidden to make scrollbars disappear $('#container').hover(function() { $("body").css("overflow","hidden"); }, function() { $("body").css("overflow","auto"); });
看演示： http : //jsfiddle.net/9Htjw/
UPDATE
你可以禁用鼠标滚轮。
$('#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 */ }
资料来源： http : //solidlystated.com/scripting/javascript-disable-mouse-wheel/
演示： http : //jsfiddle.net/9Htjw/4/
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); } }
我正在试图在这里与我的代码是：
-
检查div是否被盘旋或被淹没
-
获取滚动方向
-
将ScrollTop与容器的高度进行比较，并在达到最大值或最小值时（直到模糊不清），防止进一步滚动。
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/
可能不是最干净的代码，它可以很容易地改善，但这对我的作品。 (control.scrollHeight - control.clientHeight)这部分对我来说是有问题的，但是你应该知道如何处理这个问题。
我在我的页面上使用nicescroll没有方法的工作。 我意识到nicescroller正在调用scroll事件，并且在hover元素时不得不暂时禁用nicescroll。
解决scheme：hover元素时暂时禁用nicescroll
$('body').on('mouseover', '#element', function() { $('body, html').css('overflow', 'auto').getNiceScroll().remove(); }).on('mouseout', '#element', function() { $('body, html').css('overflow', 'hidden').niceScroll(); });
