使用 jQuery/JS 向上或向下捕捉鼠标滚轮，而无需实际滚动

Question

我试图捕捉鼠标滚轮是否被触发以及它是向上还是向下滚动而不实际滚动页面（正文有溢出：隐藏）。

知道如何使用 jQuery 或纯 javascript 来实现这一点吗？

$(window).scroll(function(){
    if( /* scroll up */){ }
    else { /* scroll down */ }
});

Answer 1

我很少推广插件，但这一款非常棒（而且体积相对较小）：

https://plugins.jquery.com/mousewheel/

它允许做这样的事情：

$(window).mousewheel(function(turn, delta) {

  if (delta == 1) // going up
  else // going down

  // all kinds of code

  return false;
});

http://codepen.io/anon/pen/YPmjym?editors=001

---

更新 - 如果不需要支持旧版浏览器，此时可以将鼠标滚轮插件替换为 wheel 事件：

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

  var delta = e.originalEvent.deltaY;

  if (delta > 0) // going down
  else // going up

  return false;
});

Answer 2

这会禁用滚动。

注意：请注意，只有将鼠标悬停在元素上时它才会停止滚动。

$('#container').hover(function() {
    $(document).bind('mousewheel DOMMouseScroll',function(){ 
       console.log('Scroll!'); 
       stopWheel(); 
    });
}, function() {
    $(document).unbind('mousewheel DOMMouseScroll');
});


function stopWheel(e){
    if(!e){ /* IE7, IE8, Chrome, Safari */ 
        e = window.event; 
    }
    if(e.preventDefault) { /* Chrome, Safari, Firefox */ 
        e.preventDefault(); 
    } 
    e.returnValue = false; /* IE7, IE8 */
}

引自amosrivera's answer

编辑：检查它的滚动方式。

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       // downscroll code
   } else {
      // upscroll code
   }
   lastScrollTop = st;
});