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

Question

有没有办法scroll在jQuery中获取鼠标滚轮事件(而不是讨论事件)？

Answer 1

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

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

请参阅CodePen上的Jesse Dupuy(@ blindside85)的Pen 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

Answer 3

有一个插件可以检测上/下鼠标滚轮和区域内的速度.

Answer 4

截至2017年,你可以写

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

  // deltaY obviously records vertical scroll, deltaX and deltaZ exist too
  if(event.originalEvent.deltaY < 0){
    // wheeled up
  }
  else {
    // wheeled down
  }
});

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

Answer 5

谈论"mousewheel"事件的答案是指一个弃用的事件.标准事件只是"轮子".请参阅https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

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

来自stackoverflow

Answer 7

这是一个香草解决方案.如果传递给函数的事件是event.originalEventjQuery作为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

Answer 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");
            }
        });
    });

Answer 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');
    }
});