首頁猿問如何處理html頁面的滾動事件

如何處理html頁面的滾動事件

JavaScript

叮當貓咪 2018-10-09 13:29:06

想實現(xiàn)當用戶將頁面滾動到底部時，應用顯示返回頂部的按鈕（之前是隱藏的）。為了實現(xiàn)這個功能需要跟蹤頁面的滾動事件，需要判斷頁面是否已經(jīng)滾動到了底部。查了一下相關文檔，碰到了問題，判斷滾動事件，用body.onscroll還是window.onscroll，為什么？判斷滾動的位置，用body.scrollTop，document.document.scrollTop，還是window.scrollY，為什么？不同瀏覽器實現(xiàn)的方式不一樣嗎？是否用DOCTYPE也有影響？

查看完整描述

1 回答

慕蓋茨4494581

TA貢獻1850條經(jīng)驗獲得超11個贊

原生JavaScript：

 $(window).scroll(function(event){  
    var wScrollY = window.scrollY; // 當前滾動條位置    
    var wInnerH  = window.innerHeight; // 設備窗口的高度（不會變）    
    var bScrollH = document.body.scrollHeight; // 滾動條總高度        
    if (wScrollY + wInnerH >= bScrollH) {            
        console.log("到底了.");
    }    
});

JQuery ：

$(window).scroll(function () {    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {        
        console.log("到底了.");
    }
});

原理都是一樣的：滾動底部的條件是: 滾動的高度 + windows 窗口高度 >= 滾動條總高度

反對回復 2018-11-04