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

Posted 2023-02-22

【中文标题】当鼠标悬停在绝对 div 上时，jQuery 禁用滚动

【英文标题】：jQuery disable scroll when mouse over an absolute div

【发布时间】：2011-11-26 03:33:15

【问题描述】：

当鼠标悬停在 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();
);

【问题讨论】：

我无法理解您的问题，这不是默认行为吗？当您将鼠标悬停在“div”上并且您有“overflow:scroll”时，它只会滚动“div”，否则会滚动窗口，或者您是否尝试这样做，例如，当它完成滚动时，它仍然不会滚动窗口？

我怀疑他完全符合你的描述。他绝对定位的 div 滚动，但是当它完成滚动时，他不希望主窗口滚动。在编辑 wordpress 帖子时，这一直困扰着我。一切都飞出屏幕。在编辑器中工作时，如果您的工作保持不变，那就太好了！

是的 - 这正是我的意思 - 感谢@mrtsherman 澄清这一点。

【参考方案1】：

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

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。

【讨论】：

@kunigami - 我找出了问题所在并更新了我的答案。 e.wheelDelta 在 jQuery 1.7 中被删除，所以我必须通过 orginalEvent 来访问它。 bugs.jquery.com/ticket/10676

这里有一个类似的解决方案，使用纯 JS 事件而不是 jQuery 事件：***.com/questions/9256213/…

@mrtsherman 首先，谢谢你的回答。但不要从 jsFiddle 复制粘贴。上面的代码将在 webkit 中导致 Unexpected token ILLEGAL 有一些无效（不幸的是不可见）字符。见***.com/questions/4404526/…。

谢谢！这在 Chrome、Safari、Firefox 和 IE9 中对我来说就像一个魅力。

谢谢。在 Chrome、Firefox、IE9/8/7 中完美运行。在 webkit 中得到了 Unexpected token ILLEGAL 并通过在 Notepadd++ 中粘贴代码 sn-p 来修复它，删除隐藏的“？” char 并再次将代码复制粘贴到 Visual Studio 中。

【参考方案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/

【讨论】：

它工作正常，当 div 背景透明时出现问题。请您告诉如何解决这个问题。

【参考方案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);
        
    

【参考方案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();
);

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

【参考方案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());