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

javascript jquery mousewheel

2022-08-30 03:06:45

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

答案 1

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

答案 2

绑定到两者，最终对我来说效果很好：mousewheelDOMMouseScroll

$(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上的Pen Vanilla JS Scroll Tracking。

此代码目前在Chrome v50，Firefox v44，Safari v9和IE9 +中工作。

引用：