在jQuery中获取鼠标滚轮事件？

Posted 2023-04-13

技术标签:

【中文标题】在jQuery中获取鼠标滚轮事件？【英文标题】：Get mouse wheel events in jQuery? 【发布时间】：2012-01-01 15:43:12 【问题描述】：

有没有办法在 jQuery 中获取鼠标滚轮事件（不是说scroll 事件）？

【问题讨论】：

快速搜索出现了this plugin，这可能会有所帮助。这个解决方案对我有用：***.com/questions/7154967/jquery-detect-scrolldown @thejh 发布了一个关于 DOM3 事件的新答案：***.com/a/24707712/2256325 jQuery scroll() detect when user stops scrolling的可能重复只是一个注释。如果您只是想检测输入的更改，而没有通过鼠标滚轮检测更改，请尝试$(el).on('input', ... 【参考方案1】：

$(document).ready(function()
    $('#foo').bind('mousewheel', function(e)
        if(e.originalEvent.wheelDelta /120 > 0) 
            console.log('scrolling up !');
        
        else
            console.log('scrolling down !');
        
    );
);

【讨论】：

DOMMouseScroll事件在FF中使用，所以你必须同时监听.bind('DOMMouseScroll mousewheel') evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/… e.originalEvent.wheelDelta 在 FF23 中未定义你不需要除以120 是没用的cpu浪费一定是最佳答案但无论如何，你为什么要把它除以 120？那是什么常数？（正如 venimus 指出的那样，您不必这样做。）【参考方案2】：

绑定到mousewheel 和DOMMouseScroll 对我来说效果非常好：

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

此方法适用于 IE9+、Chrome 33 和 Firefox 27。

编辑 - 2016 年 3 月

我决定重新审视这个问题，因为它已经有一段时间了。滚动事件的 MDN 页面有一种很好的方法来检索使用requestAnimationFrame 的滚动位置，这比我之前的检测方法更可取。除了滚动方向和位置之外，我修改了他们的代码以提供更好的兼容性：

(function() 
  var supportOffset = window.pageYOffset !== undefined,
    lastKnownPos = 0,
    ticking = false,
    scrollDir,
    currYPos;

  function doSomething(scrollPos, scrollDir) 
    // Your code goes here...
    console.log('scroll pos: ' + scrollPos + ' | scroll dir: ' + scrollDir);
  

  window.addEventListener('wheel', function(e) 
    currYPos = supportOffset ? window.pageYOffset : document.body.scrollTop;
    scrollDir = lastKnownPos > currYPos ? 'up' : 'down';
    lastKnownPos = currYPos;

    if (!ticking) 
      window.requestAnimationFrame(function() 
        doSomething(lastKnownPos, scrollDir);
        ticking = false;
      );
    
    ticking = true;
  );
)();

请参阅 Jesse Dupuy (@blindside85) 在CodePen 上的钢笔Vanilla JS Scroll Tracking。

此代码目前在Chrome v50, Firefox v44, Safari v9, and IE9+中工作

参考资料：

https://developer.mozilla.org/en-US/docs/Web/Events/scroll https://developer.mozilla.org/en-US/docs/Web/Events/wheel

【讨论】：

这对我来说效果最好。但是，此脚本每次“单击”滚轮都会运行。对于某些脚本来说，这可能会让人不知所措。有没有办法将每个滚动事件视为一个实例，而不是每次单击滚轮时运行脚本？并非特别如此。据我所见，许多人要么避免处理滚动跟踪，要么改用计时器（例如，每 x 毫秒检查一次用户在页面上的位置等）。如果有更高效的解决方案，我肯定想知道！我找到了一种方法：***.com/questions/23919035/… 感谢您的更新。您可以将代码复制到答案中吗？永远不知道 codepen 是否有一天会失败。 It's happened before. @JesseDupuy，我会赞成这个答案，但如果文档适合视图（“宽度：100vh；高度：100vh”）或“溢出：隐藏”，您的更新版本将不起作用. “window.addEventListener('scroll', callback)”不是“window.addEventListener('mousewheel', callback)”的正确答案。【参考方案3】：

截至2017年，你可以写

$(window).on('wheel', function(event)

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too.
  // this condition makes sure it's vertical scrolling that happened
  if(event.originalEvent.deltaY !== 0)

    if(event.originalEvent.deltaY < 0)
      // wheeled up
    
    else 
      // wheeled down
    
  
);

适用于当前的 Firefox 51、Chrome 56、IE9+

【讨论】：

这个答案比其他所有答案都好！ event.originalEvent.deltaY 在水平滚动时可以为 0（刚刚在我的笔记本电脑上试过），所以你可能想要 if x<0 else if x>0。【参考方案4】：

有一个plugin 可以检测上/下鼠标滚轮和区域上的速度。

【讨论】：

插件？来吧..检查下面的答案你可以做到没有【参考方案5】：

有关“鼠标滚轮”事件的答案是指已弃用的事件。标准事件只是“***”。见https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

【讨论】：

我尝试了这些并发现：“wheel”在 Firefox 和 IE 中有效，但在 Chrome 中无效。 “鼠标滚轮”适用于 Chrome 和 IE，但不适用于 Firefox。 “DOMMouseScroll”仅适用于 Firefox。哇，这为我节省了很多时间。谢谢！ Chrome 似乎在 2013 年 8 月增加了对“wheel”的支持：code.google.com/p/chromium/issues/detail?id=227454 Safari 仍然不支持滚轮事件。正如您的文档所说，Edge 支持 wheel 事件而不是 IE，这不是一回事。 CanIuse【参考方案6】：

这对我有用:)

 //Firefox
 $('#elem').bind('DOMMouseScroll', function(e)
     if(e.originalEvent.detail > 0) 
         //scroll down
         console.log('Down');
     else 
         //scroll up
         console.log('Up');
     

     //prevent page fom scrolling
     return false;
 );

 //IE, Opera, Safari
 $('#elem').bind('mousewheel', function(e)
     if(e.originalEvent.wheelDelta < 0) 
         //scroll down
         console.log('Down');
     else 
         //scroll up
         console.log('Up');
     

     //prevent page fom scrolling
     return false;
 );

from ***

【讨论】：

【参考方案7】：

这是一个普通的解决方案。如果传递给函数的事件是event.originalEvent，则可以在 jQuery 中使用，jQuery 将其作为 jQuery 事件的属性。或者，如果在callback 函数内，我们在第一行之前添加：event = event.originalEvent;。

此代码对滚轮速度/数量进行规范化，对于典型鼠标的向前滚动是正数，对于向后滚动鼠标滚轮移动是负数。

演示：http://jsfiddle.net/BXhzD/

var wheel = document.getElementById('wheel');

function report(ammout) 
    wheel.innerhtml = 'wheel ammout: ' + ammout;


function callback(event) 
    var normalized;
    if (event.wheelDelta) 
        normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
     else 
        var rawAmmount = event.deltaY ? event.deltaY : event.detail;
        normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
    
    report(normalized);


var event = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
window.addEventListener(event, callback);

还有一个jQuery插件，代码比较冗长，加了一些糖：https://github.com/brandonaaron/jquery-mousewheel

【讨论】：

【参考方案8】：

这适用于每个 IE、Firefox 和 Chrome 的最新版本。

$(document).ready(function()
        $('#whole').bind('DOMMouseScroll mousewheel', function(e)
            if(e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) 
                alert("up");
            
            else
                alert("down");
            
        );
    );

【讨论】：

【参考方案9】：

我今天遇到了这个问题，发现这段代码对我来说很好用

$('#content').on('mousewheel', function(event) 
    //console.log(event.deltaX, event.deltaY, event.deltaFactor);
    if(event.deltaY > 0) 
      console.log('scroll up');
     else 
      console.log('scroll down');
    
);

【讨论】：

【参考方案10】：

使用此代码

 knob.bind('mousewheel', function(e)  
 if(e.originalEvent.wheelDelta < 0) 
    moveKnob('down');
   else 
    moveKnob('up');
 
  return false;
);

【讨论】：

【参考方案11】：

@DarinDimitrov 发布的插件，jquery-mousewheel，is broken with jQuery 3+。最好使用与 jQuery 3+ 一起使用的 jquery-wheel。

如果你不想走 jQuery 路线，MDN highly cautions using the mousewheel event 因为它是非标准的并且在许多地方不受支持。相反，它表示you should use the wheel event，因为您对所获得的值的确切含义有了更多的特异性。大多数主流浏览器都支持它。

【讨论】：

【参考方案12】：

我的组合看起来像这样。它在每次向下/向上滚动时淡出并淡入。否则，您必须向上滚动到标题，以使标题淡入。

var header = $("#header");
$('#content-container').bind('mousewheel', function(e)
    if(e.originalEvent.wheelDelta > 0) 
        if (header.data('faded')) 
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        
    
    else
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);
    
);

上面的那个没有针对触摸/移动进行优化，我认为这个对所有移动都更好：

var iScrollPos = 0;
var header = $("#header");
$('#content-container').scroll(function () 

    var iCurScrollPos = $(this).scrollTop();
    if (iCurScrollPos > iScrollPos) 
        if (!header.data('faded')) header.data('faded', 1).stop(true).fadeTo(800, 0);

     else 
        //Scrolling Up
        if (header.data('faded')) 
            header.data('faded', 0).stop(true).fadeTo(800, 1);
        
    
    iScrollPos = iCurScrollPos;

);

【讨论】：

【参考方案13】：

如果使用提到的jquery mousewheel plugin，那么如何使用事件处理函数的第二个参数-delta：

$('#my-element').on('mousewheel', function(event, delta) 
    if(delta > 0) 
    console.log('scroll up');
     
    else 
    console.log('scroll down');
    
);

【讨论】：

【参考方案14】：

我认为很多关键的事情都有些乱七八糟，我需要阅读所有答案才能使我的代码按我的意愿工作，所以我将我的发现只发布在一个地方：

您应该使用"wheel" 事件而不是其他已弃用或特定于浏览器的事件。这里的很多人都搞错了：x>0 的反义词是x<=0，x<0 的反义词是x>=0，这里的许多答案会在x=0 时触发错误地向下或向上滚动（水平滚动）。有人问如何设置敏感度，为此您可以使用 setTimeout() 并延迟 50 毫秒来更改一些辅助标志 isWaiting=false 并使用 if(isWaiting) 保护自己，然后不要做任何事情。当它触发时，您手动更改 isWaiting=true 并在此行下方再次启动 setTimeout，稍后将在 50 毫秒后更改 isWaiting=false。

【讨论】：

【参考方案15】：

我最近在哪里遇到了同样的问题 $(window).mousewheel 正在返回 undefined

我所做的是$(window).on('mousewheel', function() );

我正在使用的进一步处理它：

function (event) 
    var direction = null,
        key;

    if (event.type === 'mousewheel') 
        if (yourFunctionForGetMouseWheelDirection(event) > 0) 
            direction = 'up';
         else 
            direction = 'down';

【讨论】：

你没说有什么newUtilities.getMouseWheelDirection 这超出了这个问题的范围。所以它不是复制粘贴网站。

以上是关于在jQuery中获取鼠标滚轮事件？的主要内容，如果未能解决你的问题，请参考以下文章

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