如何确定jQuery滚动事件的方向？

Question

如何确定jQuery滚动事件的方向？

375

我正在寻找类似于这种效果的东西：

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

有什么想法吗？

- Zach

对于那些在弹性滚动方面遇到问题的人，请使用此答案 https://dev59.com/7Ww05IYBdhLWcg3wkivX - Timothy Dalton

1

现在最容易使用的是wheel事件：https://dev59.com/7Ww05IYBdhLWcg3wkivX#33334461。 - Shikkediel

25个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thakurdev · Answer 1

你应该试一下这个

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

- Dexterial · Answer 2

这适用于所有PC或手机浏览器，扩展了顶部答案。可以构建一个更复杂的事件对象window["scroll_evt"]，然后在handleScroll()函数中调用它。这个触发器同时满足2个条件，如果经过一定的延迟或通过某些增量来消除一些不必要的触发器。

window["scroll_evt"]={"delta":0,"delay":0,"direction":0,"time":Date.now(),"pos":$(window).scrollTop(),"min_delta":120,"min_delay":10};
$(window).scroll(function() {

    var currentScroll = $(this).scrollTop();
    var currentTime = Date.now();
    var boolRun=(window["scroll_evt"]["min_delay"]>0)?(Math.abs(currentTime - window["scroll_evt"]["time"])>window["scroll_evt"]["min_delay"]):false;
    boolRun = boolRun && ((window["scroll_evt"]["min_delta"]>0)?(Math.abs(currentScroll - window["scroll_evt"]["pos"])>window["scroll_evt"]["min_delta"]):false);
    if(boolRun){
        window["scroll_evt"]["delta"] = currentScroll - window["scroll_evt"]["pos"];
        window["scroll_evt"]["direction"] = window["scroll_evt"]["delta"]>0?'down':'up';
        window["scroll_evt"]["delay"] =currentTime - window["scroll_evt"]["time"];//in milisecs!!!
        window["scroll_evt"]["pos"] = currentScroll;
        window["scroll_evt"]["time"] = currentTime;
        handleScroll();
    }
});


function handleScroll(){
    event.stopPropagation();
    //alert(window["scroll_evt"]["direction"]);
    console.log(window["scroll_evt"]);
}

- uggeh · Answer 3

我在弹性滚动（滚动反弹、橡皮筋效果）方面遇到了问题。如果接近页面顶部，则忽略向下滚动事件对我有帮助。

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

- Spacefrog · Answer 4

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

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

- Kbam7 · Answer 5

这是一个简单易用的检测工具，可以检测用户是否滚动到页面顶部以及当他们回到页面顶部时。

$(window).scroll(function() {
    if($(window).scrollTop() > 0) {
        // User has scrolled
    } else {
        // User at top of page
    }
});