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事件替换mousewheel插件：

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

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

2 个答案: