使用 jQuery 检查没有滚动条的鼠标滚轮事件

Posted 2023-04-13

【中文标题】使用 jQuery 检查没有滚动条的鼠标滚轮事件

【英文标题】：Use jQuery to check mousewheel event without scrollbar

【发布时间】：2013-09-23 16:20:19

【问题描述】：

如何在没有滚动条的情况下检查鼠标滚轮的移动？

$(document).mousewheel(function() 
     clicker.html("a7a");
);

【参考方案1】：

我强烈推荐你使用这个 jQuery 插件：PLUGIN

没有插件，试试这个例子：EXAMPLE

HTML：

<div id='foo' style='height:300px; width:300px; background-color:red'></div>

Javascript：

$('#foo').bind('mousewheel', function(e) 
    if(e.originalEvent.wheelDelta / 120 > 0) 
        alert('up');
     else 
        alert('down');
    
);

div上没有滚动条但检测到滚轮事件。

【讨论】：

所以看起来wheelDelta 出现在120 或-120 所以除法标准化这个值 - 但有谁知道为什么浏览器选择 120 作为值？

我建议使用事件处理函数的第二个参数 - delta: $('#el').on('mousewheel', function(e, delta) if(delta > 0) /*up*/ else /*down*/ )。见this answer。

那么jquery-mousewheel插件的目的是什么，如果没有它可以处理事件呢？

【参考方案2】：

使用此代码

$('#foo').bind('mousewheel DOMMouseScroll', function (event)            
     if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) 
          //up
     
     else 
          //down
     
);

【讨论】：

如果包含更多关于其工作原理的解释，这个答案会更好，特别是因为已经有一个赞成的答案存在。

该示例运行良好，但documentation 表示使用'wheel' 事件而不是'mousewheel'。

【参考方案3】：

而且，如果您根本不想使用任何插件（IE8、Chrome、Firefox、Safari、Opera...），只需这样做：

if (document.addEventListener) 
    document.addEventListener("mousewheel", MouseWheelHandler(), false);
    document.addEventListener("DOMMouseScroll", MouseWheelHandler(), false);
 else 
    sq.attachEvent("onmousewheel", MouseWheelHandler());



function MouseWheelHandler() 
    return function (e) 
        // cross-browser wheel delta
        var e = window.event || e;
        var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));

        //scrolling down?
        if (delta < 0) 
            alert("Down");
        

        //scrolling up?
        else 
             alert("Up");
        
        return false;
    

活生生的例子：http://jsfiddle.net/CvCc6/1/

【参考方案4】：

这只是对@Aaron 答案的更新，使用了新的“wheel”事件，如下所述：https://developer.mozilla.org/en-US/docs/Web/Events/wheel

$('#foo').on('wheel', function(e)
    if(e.originalEvent.deltaY < 0) 
        console.log('scrolling up !');
     else
        console.log('scrolling down !');
    
);

您还可以使用deltaX 来查看水平滚动，或者如果您正在制作一些疯狂的 3D 内容，则可以使用 deltaZ。