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

有没有一种方法可以scroll在jQuery中获取鼠标滚轮事件（而不是谈论事件）？

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

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

绑定到两者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;
  });
})();

该代码目前正在使用 Chrome v50, Firefox v44, Safari v9, and IE9+

参考文献：

• https://developer.mozilla.org/zh-CN/docs/Web/Events/scroll
• https://developer.mozilla.org/zh-CN/docs/Web/Events/wheel

截至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 +

谈论“鼠标滚轮”事件的答案是指已过时的事件。标准事件只是“转盘”。参见https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

这为我工作：）

 //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

这是一种香草的解决方案。如果传递给函数的事件是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

这适用于每个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");
            }
        });
    });

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

$('#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');
    }
});

使用此代码

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

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

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;

});

该@DarinDimitrov发布的插件，jquery-mousewheel，是中断与jQuery的3+。最好将jquery-wheel其与jQuery 3+配合使用。

如果您不想使用jQuery路线，则MDN强烈建议您使用该mousewheel事件，因为该事件是非标准的，并且在许多地方不受支持。相反，它表示您应该使用wheel事件，因为您对所要表达的确切含义有了更多的特异性。大多数主流浏览器都支持它。

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

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

我最近在$(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';
        }
    }
}