Question

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

我看过这篇文章use jquery to disable mouse scroll wheel function when the mouse cursor is inside a div?，但它似乎没有提供任何答案 - 因此我的问题。

我假设它会是这样的（如果只存在这些方法）：

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

Answer 1

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

Amos - 在身上设置overflow:hidden。这很简单，效果很好。但主窗口的滚动条会闪烁进出。
Amos - 使用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。

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/

更新

您可以禁用鼠标滚轮。

$('#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/

Answer 3

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);
        }
    }

Answer 4

我在这里尝试用我的代码做的是：

检查div是否悬停在
获取滚动方向

将ScrollTop与容器的高度进行比较，并防止在达到最大值或分钟时进一步滚动（直到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/

可能不是最干净的代码，它可以轻松改进，但这对我有用。 (control.scrollHeight - control.clientHeight)这部分对我来说是个问题，但你应该知道如何解决这个问题。

Answer 5

我在我的页面上使用了nicescroll没有方法可行。我意识到nicescroller正在调用scroll事件，并且在悬停元素时不得不暂时禁用nicescroll。

解决方案：暂停元素时暂时禁用nicescroll

$('body').on('mouseover', '#element', function() {
    $('body, html').css('overflow', 'auto').getNiceScroll().remove();
}).on('mouseout', '#element', function() {
    $('body, html').css('overflow', 'hidden').niceScroll();
});

Answer 6

@mrtsherman的答案几乎对我有用，但是有一个breaking change with passive scrolling in 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());
  }
}

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

6 个答案: