jquery监听开始滚动和停止滚动

html

<div id="scroll-wrap">
  内容...
</div>

css

#scroll-wrap{
    height: 600px;
    overflow: auto;
}

js

先引入Jquery

$(document).ready(function(){
    const $ScrollWrap = $("#scroll-wrap")
    // 监听滚动停止
    let t1 = 0;
    let t2 = 0;
    let timer = null; // 定时器
    $ScrollWrap.on("touchstart", function(){
        // 触摸开始 ≈ 滚动开始
    })
    $ScrollWrap.on("scroll", function(){
        // 滚动
        clearTimeout(timer)
        timer = setTimeout(isScrollEnd, 100)
        t1 = $ScrollWrap.scrollTop()
    })
    function isScrollEnd() {
        t2 = $ScrollWrap.scrollTop();
        if(t2 == t1){
            console.log("滚动停止")
            clearTimeout(timer)
        }
    }
})

如果是监听整个页面的滚动,可以直接监听$(document)的事件

猜你喜欢

转载自www.cnblogs.com/mankii/p/12612852.html
今日推荐