js監聽頁面滾動條
案例
舊版本
新版本

TOC

js監聽頁面滾動條

使用scroll()方法

https://www.w3school.com.cn/jquery/event_scroll.asp

當頁面滾動條變化時,執行的函數:

$(window).scroll(function () {....});
或
$(selector).scroll(function)//function非必須

案例

舊版本

舊版本可以使用bind/unbind方法

// 頁面渲染完之中執行的代碼
$(function(){
    // 綁定事件，監聽滾動條下拉的動作
    bindScrollEvent();
});
function bindScrollEvent(){
    // 添加滾動監聽事件
    $(window).scroll( function() {
        var docHeight = $(document).height(); // 獲取整個頁面的高度(不只是窗口,還包括為顯示的頁面)
        var winHeight = $(window).height(); // 獲取當前窗體的高度(顯示的高度)
        var winScrollHeight = $(window).scrollTop(); // 獲取滾動條滾動的距離(移動距離)
        //還有30像素的時候,就查詢
        if(docHeight == winHeight + winScrollHeight){
            //到底(一般是離到底還有一段距離就查詢的)
        }
    });
}


//移除監聽
$(window).unbind("scroll");

新版本

function doSth () {
    // do something
}
// 綁定scroll事件
$(window).on('scroll', doSth);
// 解綁scroll事件
$(window).off('scroll', doSth);

來自為知筆記(Wiz)