我在找这样的东西:

$(window).scroll(function(event){
   if (/* magic code*/ ){
       // upscroll code
   } else {
      // downscroll code
   }
});

什么好主意吗?


当前回答

为了忽略页面顶部和底部的任何snap / momentum / bounce back,这里是Josiah接受的答案的修改版本:

var prevScrollTop = 0;
$(window).scroll(function(event){

    var scrollTop = $(this).scrollTop();

    if ( scrollTop < 0 ) {
        scrollTop = 0;
    }
    if ( scrollTop > $('body').height() - $(window).height() ) {
        scrollTop = $('body').height() - $(window).height();
    }

    if (scrollTop >= prevScrollTop && scrollTop) {
        // scrolling down
    } else {
        // scrolling up
    }

    prevScrollTop = scrollTop;
});

其他回答

检查当前的scrollTop和之前的scrollTop

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

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

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

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

我已经成功地使用这个方法在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()来阻止页面滚动,这样就可以将鼠标滚轮事件用于页面滚动之外的其他事情,比如某种类型的缩放功能。

在元素的.data()中,您可以存储JSON和测试值来启动事件

{ top : 1,
   first_top_event: function(){ ...},
   second_top_event: function(){ ...},
   third_top_event: function(){ ...},
   scroll_down_event1: function(){ ...},
   scroll_down_event2: function(){ ...}
}