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("到底了，開始加載數據");
    }