原理

目前創(chuàng)新互聯(lián)已為成百上千的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、網(wǎng)站托管、企業(yè)網(wǎng)站設(shè)計、房山網(wǎng)站維護(hù)等服務(wù)，公司將堅持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

1.通過監(jiān)聽滾動區(qū)域DOM的scroll事件, 計算出觸底

// 滾動可視區(qū)域高度 + 當(dāng)前滾動位置 === 整個滾動高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.觸底后觸發(fā)列表添加, 列表添加使用createDocumentFragment, 將多次插入的DOM先存入內(nèi)存, 最后一次填充進(jìn)去, 提高性能, 也方便后面的MutationObserver監(jiān)聽

3.使用MutationObserver監(jiān)聽列表的DOM添加, 添加完畢后, 隱藏加載中提示

示例

https://codepen.io/klren0312/full/dybgayL

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollTop
https://developer.mozilla.org/zh-CN/docs/Web/API/GlobalEventHandlers/onscroll
https://developer.mozilla.org/zh-CN/docs/Web/API/Document/createDocumentFragment
https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

代碼

 
 
 
 
 


 

  

   
000000
   
000000
   
000000
   
000000
   
000000
  
  
加載中...
 
 

總結(jié)

以上所述是小編給大家介紹的JS實現(xiàn)滾動條觸底加載更多,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！