JS实现滚动条触底加载更多

原理

1.通过监听滚动区域DOM的scroll事件, 计算出触底

// 滚动可视区域高度 + 当前滚动位置 === 整个滚动高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.触底后触发列表添加, 列表添加使用createdocumentFragment, 将多次插入的DOM先存入内存, 最后一次填充进去, 提高性能, 也方便后面的MutationObserver监听

3.使用MutationObserver监听列表的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

代码

 
 
 
 
 
  .hide {
   display: none;
  }
  .scroll {
   height: 200px;
   width: 300px;
   overflow-y: auto;
   border: 1px solid #ddd;
  }
  .loading {
   text-align: center;
  }
  ul {
   margin: 0;
   padding: 0;
  }
  li {
   padding: 10px;
   margin: 10px;
   text-align: center;
   background: #FFF6F6;
   list-style-type: none;
  }
 


 
  

   
000000
   
000000
   
000000
   
000000
   
000000
  
  加载中...
 
 

总结

以上所述是小编给大家介绍的JS实现滚动条触底加载更多,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！