你应该试试这个

var scrl
$(window).scroll(function(){
        if($(window).scrollTop() < scrl){
            //some code while previous scroll
        }else{
            if($(window).scrollTop() > 200){
                //scroll while downward
            }else{//scroll while downward after some specific height
            }
        }
        scrl = $(window).scrollTop();
    });

检查当前的scrollTop和之前的scrollTop

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

你可以这样做，而不必跟踪之前的滚动顶部，因为所有其他的例子都要求:

$(window).bind('mousewheel', function(event) {
    if (event.originalEvent.wheelDelta >= 0) {
        console.log('Scroll up');
    }
    else {
        console.log('Scroll down');
    }
});

我不是这方面的专家，所以请随意进一步研究，但当您使用$(element)时。滚动，被监听的事件是一个'滚动'事件。

但是如果您使用bind专门监听鼠标滚轮事件，则回调的事件参数的originalEvent属性包含不同的信息。其中一部分信息是wheelDelta。如果是正数，你就向上移动鼠标滚轮。如果是负的，鼠标滚轮就向下移动了。

我的猜测是鼠标滚轮事件将在鼠标滚轮转动时触发，即使页面没有滚动;在这种情况下，'scroll'事件可能不会被触发。如果需要，可以在回调的底部调用event. preventdefault()来阻止页面滚动，这样就可以将鼠标滚轮事件用于页面滚动之外的其他事情，比如某种类型的缩放功能。

我在这里看到了许多版本的好答案，但似乎有些人有跨浏览器的问题，所以这是我的解决方案。

我已经成功地使用这个方法在FF, IE和Chrome中检测方向…我没有在safari中测试它，因为我通常使用windows。

$("html, body").bind({'mousewheel DOMMouseScroll onmousewheel touchmove scroll': 
    function(e) {
        if (e.target.id == 'el') return;
        e.preventDefault();
        e.stopPropagation();

        //Determine Direction
        if (e.originalEvent.wheelDelta && e.originalEvent.wheelDelta >= 0) {
            //Up
            alert("up");

        } else if (e.originalEvent.detail && e.originalEvent.detail <= 0) {
            //Up
            alert("up");

        } else {
            //Down
            alert("down");
        }
    }
});

请记住，我也使用这个来停止任何滚动，所以如果你想要滚动仍然发生，你必须删除e.preventDefault();e.stopPropagation ();

这段代码在IE, Firefox, Opera和Chrome中工作良好:

$(window).bind('wheel mousewheel', function(event) {
      if (event.originalEvent.deltaY >= 0) {
          console.log('Scroll down');
      }
      else {
          console.log('Scroll up');
      }
  });

'wheel mousewheel'和属性delay必须在bind()函数中使用。

记住:出于安全考虑，你的用户必须更新他们的系统和浏览器。2018年，“我有ie7”的借口是一派胡言。我们必须教育用户。

祝你有愉快的一天。

如果你只是想知道你是使用指针设备(鼠标或跟踪板)向上滚动还是向下滚动，你可以使用wheel事件的delay属性。

$('.container').on('wheel', function(event) { if (event.originalEvent.deltaY > 0) { $('.result').append('Scrolled down!<br>'); } else { $('.result').append('Scrolled up!<br>'); } }); .container { height: 200px; width: 400px; margin: 20px; border: 1px solid black; overflow-y: auto; } .content { height: 300px; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="content"> Scroll me! </div> </div> <div class="result"> <p>Action:</p> </div>