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

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

我有弹性滚动的问题(滚动弹跳，橡皮筋)。 如果接近页面顶部，忽略下滚动事件对我来说是有效的。

var position = $(window).scrollTop();
$(window).scroll(function () {
    var scroll = $(window).scrollTop();
    var downScroll = scroll > position;
    var closeToTop = -120 < scroll && scroll < 120;
    if (downScroll && !closeToTop) {
        // scrolled down and not to close to top (to avoid Ipad elastic scroll-problems)
        $('.top-container').slideUp('fast');
        $('.main-header').addClass('padding-top');
    } else {
        // scrolled up
        $('.top-container').slideDown('fast');
        $('.main-header').removeClass('padding-top');
    }
    position = scroll;
});

现有的解决方案

从这篇帖子和其他答案中可能有3个解决方案。

解决方案1

    var lastScrollTop = 0;
    $(window).on('scroll', function() {
        st = $(this).scrollTop();
        if(st < lastScrollTop) {
            console.log('up 1');
        }
        else {
            console.log('down 1');
        }
        lastScrollTop = st;
    });

解决方案2

    $('body').on('DOMMouseScroll', function(e){
        if(e.originalEvent.detail < 0) {
            console.log('up 2');
        }
        else {
            console.log('down 2');
        }
    });

解决方案3

    $('body').on('mousewheel', function(e){
        if(e.originalEvent.wheelDelta > 0) {
            console.log('up 3');
        }
        else {
            console.log('down 3');
        }
    });

---

多浏览器测试

我无法在Safari上测试它

chrome 42 (Win 7)

解决方案1 向上:每次滚动1个事件 向下:每滚动1个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

Firefox 37 (win7)

解决方案1 向上:每次滚动20个事件 向下:每次滚动20个事件 解决方案2 向上:不工作 向下:每滚动1个事件 解决方案3 向上:不工作 向下:不工作

IE 11 (win8)

解决方案1 向上:每一次滚动10个事件(副作用:最后出现向下滚动) 向下:每次滚动10个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:不工作 向下:每滚动1个事件

IE 10 (win7)

解决方案1 向上:每次滚动1个事件 向下:每滚动1个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

IE 9 (win7)

解决方案1 向上:每次滚动1个事件 向下:每滚动1个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

IE 8 (win7)

解决方案1 向上:每一次滚动2个事件(副作用:最后出现向下滚动) 向下:每一次滚动2~4个事件 解决方案2 向上:不工作 向下:不工作 解决方案3 向上:每次滚动1个事件 向下:每滚动1个事件

---

联合解决方案

我检查了ie11和ie8的副作用是来自if else语句。因此，我用if else if语句替换它，如下所示。

从多浏览器测试中，我决定对普通浏览器使用解决方案3，对firefox和IE 11使用解决方案1。

我参考这个答案来检测IE 11。

    // Detect IE version
    var iev=0;
    var ieold = (/MSIE (\d+\.\d+);/.test(navigator.userAgent));
    var trident = !!navigator.userAgent.match(/Trident\/7.0/);
    var rv=navigator.userAgent.indexOf("rv:11.0");

    if (ieold) iev=new Number(RegExp.$1);
    if (navigator.appVersion.indexOf("MSIE 10") != -1) iev=10;
    if (trident&&rv!=-1) iev=11;

    // Firefox or IE 11
    if(typeof InstallTrigger !== 'undefined' || iev == 11) {
        var lastScrollTop = 0;
        $(window).on('scroll', function() {
            st = $(this).scrollTop();
            if(st < lastScrollTop) {
                console.log('Up');
            }
            else if(st > lastScrollTop) {
                console.log('Down');
            }
            lastScrollTop = st;
        });
    }
    // Other browsers
    else {
        $('body').on('mousewheel', function(e){
            if(e.originalEvent.wheelDelta > 0) {
                console.log('Up');
            }
            else if(e.originalEvent.wheelDelta < 0) {
                console.log('Down');
            }
        });
    }

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

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

});

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

我已经成功地使用这个方法在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中表现得很奇怪(它会因为平滑滚动而被触发很多次)，但它是有效的。

注意:滚动事件实际上是在使用光标键或鼠标滚轮拖动滚动条时触发的。

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "35px"
});

//binds the "scroll" event
$(window).scroll(function (e) {
    var target = e.currentTarget,
        self = $(target),
        scrollTop = window.pageYOffset || target.scrollTop,
        lastScrollTop = self.data("lastScrollTop") || 0,
        scrollHeight = target.scrollHeight || document.body.scrollHeight,
        scrollText = "";

    if (scrollTop > lastScrollTop) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    $("#test").html(scrollText +
      "<br>innerHeight: " + self.innerHeight() +
      "<br>scrollHeight: " + scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>lastScrollTop: " + lastScrollTop);

    if (scrollHeight - scrollTop === self.innerHeight()) {
      console.log("► End of scroll");
    }

    //saves the current scrollTop
    self.data("lastScrollTop", scrollTop);
});

---

轮事件

你也可以看看MDN，它揭露了关于车轮事件的大量信息。

注意:wheel事件仅在使用鼠标滚轮时触发;光标键和拖动滚动条不会触发事件。

我阅读了文档和示例:跨浏览器监听此事件 在FF, IE, chrome, safari进行了一些测试后，我得到了这个片段:

//creates an element to print the scroll position
$("<p id='test'>").appendTo("body").css({
    padding: "5px 7px",
    background: "#e9e9e9",
    position: "fixed",
    bottom: "15px",
    left: "15px"
});

//attach the "wheel" event if it is supported, otherwise "mousewheel" event is used
$("html").on(("onwheel" in document.createElement("div") ? "wheel" : "mousewheel"), function (e) {
    var evt = e.originalEvent || e;

    //this is what really matters
    var deltaY = evt.deltaY || (-1 / 40 * evt.wheelDelta), //wheel || mousewheel
        scrollTop = $(this).scrollTop() || $("body").scrollTop(), //fix safari
        scrollText = "";

    if (deltaY > 0) {
        scrollText = "<b>scroll down</b>";
    } else {
        scrollText = "<b>scroll up</b>";
    }

    //console.log("Event: ", evt);
    $("#test").html(scrollText +
      "<br>clientHeight: " + this.clientHeight +
      "<br>scrollHeight: " + this.scrollHeight +
      "<br>scrollTop: " + scrollTop +
      "<br>deltaY: " + deltaY);
});