js滾動加載（無限加載）

原理圖

實現無限分頁的過程大體以下：

1 視窗滾動到底部

2 觸發加載，添加到現有內容的後面。

所以，可能會出現兩種狀況：

1 當頁面的內容不多，沒有出現滾動條。

2 當頁面的內容不少，出現了滾動條。

 

針對這兩種狀況，須要理解幾個概念：

scrollHeight即真實內容的高度；

clientHeight比較好理解，是視窗的高度，就是咱們在瀏覽器中所能看到內容的高度；

scrollTop是視窗上面隱藏掉的部分。

實現的思路：

1 若是真實的內容比視窗高度小，則一直加載到超過視窗

2 若是超過了視窗，則判斷下面隱藏的部分的距離是否小於必定的值，若是是，則觸發加載。（即滾動到了底部）