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)的事件


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM