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