由於網頁的執行都是單線程的，在JS執行的過程中，頁面會呈現阻塞狀態。因此，如果JS處理的數據量過大，過程復雜，可能會造成頁面的卡頓。傳統的數據展現都以分頁的形式，但是分頁的效果並不好，需要用戶手動點擊下一頁，才能看到更多的內容。
有很多網站使用 無限分頁 的模式，即網頁視窗到達內容底部就自動加載下一部分的內容...
本篇就無限分頁的實現模型，講述其中奧妙。
原理圖
實現無限分頁的過程大致如下：
1 視窗滾動到底部
2 觸發加載，添加到現有內容的后面。
因此，可能會出現兩種情況：
1 當頁面的內容很少，沒有出現滾動條。
2 當頁面的內容很多，出現了滾動條。
針對這兩種情況，需要理解幾個概念：
scrollHeight即真實內容的高度；
clientHeight比較好理解，是視窗的高度，就是我們在瀏覽器中所能看到內容的高度；
scrollTop是視窗上面隱藏掉的部分。
實現的思路：
1 如果真實的內容比視窗高度小，則一直加載到超過視窗
2 如果超過了視窗，則判斷下面隱藏的部分的距離是否小於一定的值，如果是，則觸發加載。（即滾動到了底部）
代碼樣例
代碼部分沒有太多的內容，需要注意的是：
1 使用fixed定位加載框
2 使用setTimeout定時觸發判斷方法，頻率可以自定義
3 通過 真實內容高度 - 視窗高度 - 上面隱藏的高度 < 20，作為加載的觸發條件
<!DOCTYPE html> <html> <head> <title>無限翻頁測試</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <style type="text/css"> #spinner{ position: fixed; top: 20px; left: 40%; display: block; color: red; font-weight: 900; background-color: rgba(80, 80, 90, 0.22); padding-top: 20px; padding-bottom: 20px; padding-left: 100px; padding-right: 100px; border-radius: 15px; } </style> </head> <body> <div id="sample"> </div> <div id="spinner"> 正在加載 </div> <script type="text/javascript"> var index = 0; function lowEnough(){ var pageHeight = Math.max(document.body.scrollHeight,document.body.offsetHeight); var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0; var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; // console.log(pageHeight); // console.log(viewportHeight); // console.log(scrollHeight); return pageHeight - viewportHeight - scrollHeight < 20; } function doSomething(){ var htmlStr = ""; for(var i=0;i<10;i++){ htmlStr += "這是第"+index+"次加載<br>"; } $('#sample').append(htmlStr); index++; pollScroll();//繼續循環 $('#spinner').hide(); } function checkScroll(){ if(!lowEnough()) return pollScroll(); $('#spinner').show(); setTimeout(doSomething,900); } function pollScroll(){ setTimeout(checkScroll,1000); } checkScroll(); </script> </body> </html>
代碼的運行結果以及視窗高度驗證
最開始沒有滾動滾動條時，上面隱藏的部分為0，視窗的高度是667（這個值是一直不變的），內容的高度為916
當向下滾動了一下后，視窗的高度不變；上面隱藏的高度增加到100，即滾動條上面代表的部分。
當觸發加載后，視窗的高度保持變；上面隱藏的高度保持不變；文本的內容增加到1816；
參考
【1】height、clientHeight、scrollHeight、offsetHeight區別
【2】ScrollHeight、OffsetHeight、ClientHeight
【4】《JS修煉之道》