js如何實現上拉加載更多...

我們在項目中經常使用到下拉加載更多，之前要么是底部寫加載按鈕，要么是引入插件。今天終於有時間手寫一個了，之前感覺挺麻煩，明白原理后，其實很簡單...

scrollTop：滾動視窗的高度距離window頂部的距離，它會隨着往上滾動而不斷增加，初始值是0，它是一個變化的值；
clientHeight:它是一個定值，表示屏幕可是區域的高度；
scrollHeight：頁面不能滾動時是不存在的，body長度超過window時才會出現，所表示body所有元素的長度，

由上面的三個值所產生一個原理公式：

scrollTop + clientHeight >= scrollHeight

    let clientHeight  = document.documentElement.clientHeight; //瀏覽器高度
    let scrollHeight = document.body.scrollHeight;
    let scrollTop = document.documentElement.scrollTop;
 
    let distance = 50;  //距離視窗還用50的時候，開始觸發；

    if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
        console.log("到底了，開始加載數據");
    }

來源：https://segmentfault.com/a/1190000017078193