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


Posted in Javascript onSeptember 19, 2019

原理

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

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

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

3.使用MutationObserver监听列表的DOM添加, 添加完毕后, 隐藏加载中提示

示例

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

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

参考资料

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
  .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;
  }
 </style>
</head>
<body>
 <div id="js-scroll" class="scroll">
  <ul id="js-list">
   <li>000000</li>
   <li>000000</li>
   <li>000000</li>
   <li>000000</li>
   <li>000000</li>
  </ul>
  <div class="loading hide" id="js-loading">加载中...</div>
 </div>
 <script>
  let index = 0 // 列表个数
  const listDom = document.getElementById('js-list')
  const loadingDom = document.getElementById('js-loading')
  /**
   * 使用MutationObserver监听列表的 DOM 改变
   */
  const config = {
   attributes: true,
   childList: true,
   subtree: true
  }
  const callback = function(mutationsList, observer) {
   for (let mutation of mutationsList) {
    if (mutation.type === 'childList') {
     if (index === 5) {
      loadingDom.innerText = '加载完毕'
     } else {
      loadingDom.classList.add('hide')
     }
    }
   }
  }
  const observer = new MutationObserver(callback)
  observer.observe(listDom, config)
  /**
   * clientHeight 滚动可视区域高度
   * scrollTop 当前滚动位置
   * scrollHeight 整个滚动高度
   */
  const scrollDom = document.getElementById('js-scroll')
  scrollDom.onscroll = () => {
   if (scrollDom.clientHeight + parseInt(scrollDom.scrollTop) === scrollDom.scrollHeight) {
    if (loadingDom.classList.contains('hide') && index <= 5) {
     loadingDom.classList.remove('hide')
     addList()
    }
    if (index >= 5) {
     observer.disconnect() // 加载完毕停止监听列表 DOM 变化
    }
   }
  }
  /**
   * 添加列表
   */
  function addList () {
   const fragment = document.createDocumentFragment()
   setTimeout(() => {
    ++index
    for (let i = 0; i < 5; i++) {
     const li = document.createElement('li')
     li.innerText = new Array(6).fill(index).join('')
     fragment.appendChild(li)
    }
    listDom.appendChild(fragment)
   } , 1000)
  }
 </script>
</body>
</html>

总结

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

Javascript 相关文章推荐
js对象的比较
Feb 26 Javascript
js 判断checkbox是否选中的操作方法
Nov 09 Javascript
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
JavaScript中Date.toSource()方法的使用教程
Jun 12 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
Oct 28 Javascript
基于jquery实现多选下拉列表
Aug 02 jQuery
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
Vue-cli3多页面配置详解
Mar 22 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
Dec 29 Javascript
js面向对象编程OOP及函数式编程FP区别
Jul 07 Javascript
Vue v-text指令简单使用方法示例
Sep 19 #Javascript
Vue.set 全局操作简单示例
Sep 19 #Javascript
layui对工具条进行选择性的显示方法
Sep 19 #Javascript
基于js实现抽红包并分配代码实例
Sep 19 #Javascript
Layui table field初始化加载时进行隐藏的方法
Sep 19 #Javascript
Vue 实例事件简单示例
Sep 19 #Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 #Javascript
You might like
phpMyAdmin链接MySql错误 个人解决方案
2009/12/28 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
Jquery 快速构建可拖曳的购物车DragDrop
2009/11/30 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
2013/03/26 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
JavaScript中的ubound函数使用实例
2014/11/04 Javascript
JavaScript 里的类数组对象
2015/04/08 Javascript
举例讲解AngularJS中的模块
2015/06/17 Javascript
JavaScript+html5 canvas实现本地截图教程
2020/04/16 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
js 动态生成json对象、时时更新json对象的方法
2016/12/02 Javascript
BootStrap Datetimepicker 汉化的实现代码
2017/02/10 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
[05:13]2018DOTA2亚洲邀请赛主赛事第二日战况回顾 LGD、VG双雄携手晋级
2018/04/05 DOTA
利用ctypes提高Python的执行速度
2016/09/09 Python
python+opencv实现动态物体追踪
2018/01/09 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
解决PyCharm IDE环境下,执行unittest不生成测试报告的问题
2020/09/03 Python
python 利用zmail库发送邮件
2020/09/11 Python
HTML5中视频音频的使用详解
2017/07/07 HTML / CSS
HTML5的语法变化介绍
2013/08/13 HTML / CSS
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
毕业生个人求职信范例分享
2013/12/17 职场文书
《画》教学反思
2014/04/14 职场文书
詹天佑教学反思
2014/04/30 职场文书
财务会计专业求职信
2014/06/09 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
农业项目建议书
2014/08/25 职场文书
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL