原理
1.通過監聽滾動區域dom的scroll事件, 計算出觸底
// 滾動可視區域高度 + 當前滾動位置 === 整個滾動高度
scrolldom.clientheight + scrolldom.scrolltop === scrolldom.scrollheight
2.觸底後觸發列表新增, 列表新增使用createdocumentfragment, 將多次插入的dom先存入記憶體, 最後一次填充進去, 提高效能, 也方便後面的mutationobserver監聽
3.使用mutationobserver監聽列表的dom新增, 新增完畢後, 隱藏載入中提示
示例參考資料
**document
.hide else , 1000)
總結
js實現 web頁面的滾動條下拉時載入更多
var totalpages 總頁數 var pageno 0 當前頁數 function else function dosomething pageno getjson url,data,function rtn 但是，今天測試人員發現，當瀏覽器縮放了或者螢幕顯示設定縮放時，就不能下拉載入了。時...
Js實現滾動載入原理 監聽滾動條滾動
原理 就是監聽頁面滾動事件，分析clientheight scrolltop scrollheight三者的屬性關係。1.document.compatmode css1compat 模式下 也就是宣告了dtd情況下 window.addeventlistener scroll function f...
監聽滾動條動態載入
最近做了個聊天的專案所以需要向上滾動然後動態載入，於是我就把這一塊單獨提取出來弄成外掛程式。下面就是實現的效果 直接弄在arr上面他重新取值的話會被覆蓋this.nodescrollarr self.bind scroll function else if path bottom contenth ...