V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
rateltalk
V2EX  ›  问与答

找一个可以监测页面滚动结果的 js 插件,,,???

  •  
  •   rateltalk · Mar 7, 2018 · 1583 views
    This topic created in 2976 days ago, the information mentioned may be changed or developed.

    比如页面向上滚动,,向下滚动,,滚动到顶部,滚动到底部,,这样子的监测 js 插件,,求推荐,。

    7 replies    2018-03-07 15:13:12 +08:00
    naver1
        1
    naver1  
       Mar 7, 2018
    hanzichi
        2
    hanzichi  
       Mar 7, 2018
    自己写个呗,就几行代码
    rateltalk
        3
    rateltalk  
    OP
       Mar 7, 2018
    @hanzichi
    // 页面滚动监测
    var bodyScrollTop = 0,
    bodyScrollBefore = 0;
    $(window).scroll(function () {
    bodyScrollTop = $(this).scrollTop();

    // 滚动时给 header 加标识
    $('.header').addClass('is-scrolled');

    if (bodyScrollTop >= bodyScrollBefore) { // 向下滚动
    console.log('向下滚动');
    $('.header').removeClass('is-retracted');
    } else { // 向上滚动
    console.log('向上滚动');
    $('.header').addClass('is-retracted');
    }

    setTimeout(function () {
    bodyScrollBefore = bodyScrollTop;
    }, 50);
    });

    这是我写的,,但是不能很好的监测,,总是会有延迟。或者判断不准确。
    hanzichi
        4
    hanzichi  
       Mar 7, 2018
    @s609926202

    setTimeout(function () {
    bodyScrollBefore = bodyScrollTop;
    }, 50);
    });

    这干嘛。。
    luoway
        5
    luoway  
       Mar 7, 2018
    楼主需要的是解决性能问题了,查下函数节流、去抖
    rateltalk
        6
    rateltalk  
    OP
       Mar 7, 2018
    @hanzichi 这个是记录滚动前一时间点距离顶部的距离
    hanzichi
        7
    hanzichi  
       Mar 7, 2018
    @s609926202 及时记录啊,你这延迟 50ms 记录,当然感觉有延迟了。。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   938 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 18:59 · PVG 02:59 · LAX 11:59 · JFK 14:59
    ♥ Do have faith in what you're doing.