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

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

这是一个很受欢迎的问题，因此我更新以概述此处提供的答案，哪些可能最适合您。包括三个独特的解决方案。两个来自阿莫斯，一个来自我自己。但是，每个操作都不同。

1. Amos - 在身体上设置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/

---

更新

您可以禁用鼠标滚轮。

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

我在页面上使用了 nicescroll，但没有任何方法有效。我意识到 nicescroller 正在调用滚动事件，并且在悬停元素时不得不暂时禁用 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 5

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

• 检查 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) 这部分对我来说有点问题，但你应该知道如何解决这个问题。

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