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

我已经成功地使用这个方法在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 ();

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

我已经成功地使用这个方法在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 ();

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

$(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()来阻止页面滚动，这样就可以将鼠标滚轮事件用于页面滚动之外的其他事情，比如某种类型的缩放功能。

You can use this as well $(document).ready(function(){ var currentscroll_position = $(window).scrollTop(); $(window).on('scroll', function(){ Get_page_scroll_direction(); }); function Get_page_scroll_direction(){ var running_scroll_position = $(window).scrollTop(); if(running_scroll_position > currentscroll_position) { $('.direction_value').text('Scrolling Down Scripts'); } else { $('.direction_value').text('Scrolling Up Scripts'); } currentscroll_position = running_scroll_position; } }); .direction_value{ position: fixed; height: 30px; background-color: #333; color: #fff; text-align: center; z-index: 99; left: 0; top: 0; width: 100%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="direction_value"> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ducimus expedita facilis architecto fugiat veniam natus suscipit amet beatae atque, enim recusandae quos, magnam, perferendis accusamus cumque nemo modi unde!</p>

存储之前的滚动位置，然后查看新的滚动位置是否大于或小于该位置。

这里有一个避免任何全局变量的方法(在这里可以找到):

(function () {
    var previousScroll = 0;

    $(window).scroll(function(){
       var currentScroll = $(this).scrollTop();
       if (currentScroll > previousScroll){
           alert('down');
       } else {
          alert('up');
       }
       previousScroll = currentScroll;
    });
}()); //run this anonymous function immediately

这是在用户结束滚动时检测方向的最佳解决方案。

var currentScrollTop = 0 ;

$(window).bind('scroll', function () {     

    scrollTop = $(this).scrollTop();

    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() {

        if(scrollTop > currentScrollTop){
            // downscroll code
            $('.mfb-component--bl').addClass('mfbHide');
        }else{
            // upscroll code
            $('.mfb-component--bl').removeClass('mfbHide');
        }
        currentScrollTop = scrollTop;

    }, 250));

});