移動端滑動到底部載入更多，是如何做到的？

移動端滑動到底部載入更多，是如何做到的？

滾動到底部載入的判斷條件：滾動高度 + 可視高度 &>= 文檔高度

jQuery/Zepto寫法：

$(window).scrollTop() + $(window).height() &>= $(document).height()


原生js寫法：

window.pageYOffset + window.innerHeight &>= document.documentElement.scrollHeight


監聽事件：

window.addEventListener("scroll", function() {...}, false);


有幾處可以優化的點：

（1）函數節流

window的scroll事件觸發頻率非常高，應當使用節流機制限制事件處理函數的執行頻率，推薦underscore/lodash的throttle函數，當然也可以自己編寫。代碼如下：

window.addEventListener("scroll", _.throttle(eventHandler, 200), false);


（2）預載入

可以在未滾動到底部之前，提前一段距離預載入，這樣使得滾動比較平滑，不至於在底部卡頓一下。

基於iscroll實現下拉和上拉刷新（優化） | 前端學習

剛好再找這個，然後找到一個不錯得博客