Question 1

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

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

Expand snippet

请参阅CodePen上Jesse Dupuy ( @blindside85 )的 Pen Vanilla JS 滚动跟踪。

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

参考：

Question 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+

Question 4

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

Question 5

谈论“鼠标滚轮”事件的答案是指已弃用的事件。标准事件只是“轮子”。请参阅https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

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

但无论如何，你为什么要把它除以 120？那是什么常数？（正如 venimus 指出的那样，您不必这样做。）

2021-03-16 20:01:59

该DOMMouseScroll事件在 FF 中使用，因此您必须同时收听.bind('DOMMouseScroll mousewheel') {evetns developer.mozilla.org/en-US/docs/DOM/DOM_event_reference/...

2021-03-23 20:01:59

你不需要除以 120 它是无用的浪费 cpu

2021-04-01 20:01:59

e.originalEvent.wheelDelta 在 FF23 中未定义

2021-04-08 20:01:59

一定是最好的答案

2021-04-10 20:01:59

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

Expand snippet

请参阅CodePen上Jesse Dupuy ( @blindside85 )的 Pen Vanilla JS 滚动跟踪。

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

参考：

不是特别。从我所见，许多人要么避免处理滚动跟踪，要么改用计时器（例如，每 x 毫秒检查一次用户在页面上的位置等）。如果有更高效的解决方案，我绝对想知道！
@JesseDupuy，我会赞成这个答案，但如果文档适合视图（“宽度：100vh；高度：100vh”）或得到“溢出：隐藏；”，则您的更新版本不起作用。“window.addEventListener('scroll', callback)”不是“window.addEventListener('mousewheel', callback)”的正确答案。
我找到了一种方法来做到这一点：stackoverflow.com/questions/23919035/...
这对我来说效果最好。但是，此脚本会在每次“单击”滚轮时运行。这对于某些要使用的脚本来说可能是压倒性的。有没有办法将每个滚动事件视为一个实例，而不是每次单击滚轮都运行脚本？
感谢更新。你能把你的代码复制到你的答案中吗？永远不知道 codepen 是否有一天会崩溃。它以前发生过。

Answer 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<0else if x>0。

Answer 4

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

插入？来吧..检查下面的答案你可以不用

2021-03-24 20:01:59

Answer 5

谈论“鼠标滚轮”事件的答案是指已弃用的事件。标准事件只是“轮子”。请参阅https://developer.mozilla.org/en-US/docs/Web/Reference/Events/wheel

当你的文档中说，wheel被支持的事件上Edge 没有IE哪个是不一样的东西。我可以用吗

2021-03-17 20:01:59

我尝试了这些并发现：“wheel”适用于 Firefox 和 IE，但不适用于 Chrome。“鼠标滚轮”适用于 Chrome 和 IE，但不适用于 Firefox。“DOMMouseScroll”仅适用于 Firefox。

2021-03-22 20:01:59

Safari 仍然不支持wheel 事件。

2021-03-24 20:01:59

看起来 Chrome 在 2013 年 8 月增加了对“wheel”的支持：code.google.com/p/chromium/issues/detail?id=227454

2021-03-31 20:01:59

哇，这节省了我很多时间。谢谢！

2021-04-09 20:01:59

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