scrollTop 瀑布流的關鍵點 offsetTop

scrollTop 瀑布流的關鍵點

瀑布流的關鍵點在判斷是否到達頁面底部。

scrollTop

最主要的一個參數就是 scrollTop

看個圖，你就明白了：只要知足這個條件，就載入新內容

function needLoadContent() {
    // 最後一個元素的上邊距
    let lastOffsetTop = document.querySelector('.list-item:last-child').offsetTop;
    
    // 窗口的高度
    let clientHeight = window.innerHeight;
    
    // 文檔上卷的高度
    let scrollTop = document.documentElement.scrollTop;
    
    // 若是知足條件，返回 true 
    return (lastOffsetTop < clientHeight + scrollTop);
}

關於 scrollTop 的測試， scrollTop 只有在 document.documentElement 纔會變化，其它不沒法獲取，一直是 0

參考