rateltalk
V2EX  ›  问与答

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

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

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

    7 replies  •  2018-03-07 15:13:12 +08:00
    naver1
    naver1
    Mar 7, 2018
    1
    hanzichi
    hanzichi
    Mar 7, 2018
    2
    自己写个呗,就几行代码
    rateltalk
    rateltalk
    OP
    Mar 7, 2018
    3
    @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
    hanzichi
    Mar 7, 2018
    4
    @s609926202

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

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