当鼠标悬停在绝对div上时,jQuery禁用滚动

Question

我正试图在鼠标悬停在div上时禁用窗口鼠标滚动功能 - 这样只启用div滚动 - 当鼠标离开div时 - 再次应用滚动到窗口.div绝对定位.

当鼠标光标在div中时,我看到这个帖子使用jquery来禁用鼠标滚轮功能？但它似乎没有提供任何答案 - 因此我的问题.

我假设它会是这样的(如果只存在这些方法):

$('#container').hover(function() {
     $(window).scroll().disable();
     $(this).scroll().enable();
}, function() {
     $(window).scroll().enable();
});

Answer 1

这是一个很受欢迎的问题所以我正在更新,以概述这里提供的答案,这些答案可能最适合您.包括三种独特的解决方案.两个来自Amos,一个来自我自己.但是,每种方式都不同.

1. 阿莫斯 - overflow:hidden身体.这很简单,效果很好.但主窗口的滚动条会闪烁进出.
2. Amos - 使用javascript禁用鼠标滚轮.如果您根本不需要鼠标滚轮,那就太棒了.
3. 这个答案 - 使用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.

Answer 2

您无法禁用窗口滚动,但有一个简单的解决方法:

//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/