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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
Dec 12 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
Sep 02 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
vue 中swiper的使用教程
May 22 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
vue操作下拉选择器获取选择的数据的id方法
Aug 24 Javascript
微信小程序制作表格的方法
Feb 14 Javascript
JS防抖和节流实例解析
Sep 24 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
vue-router的hooks用法详解
Jun 08 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
中英文字符串翻转函数
2008/12/09 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
基于php编程规范(详解)
2017/08/17 PHP
js截取小数点后几位的写法
2013/11/14 Javascript
Javascript实现简单二级下拉菜单实例
2014/06/15 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
原生js实现自由拖拽弹窗代码demo
2016/06/29 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
Vue页面跳转动画效果的实现方法
2018/09/23 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
Python面向对象编程基础解析(一)
2017/10/26 Python
Python unittest模块用法实例分析
2018/05/25 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
Django中多种重定向方法使用详解
2019/07/17 Python
利用OpenCV和Python实现查找图片差异
2019/12/19 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
HTML5新增属性data-*和js/jquery之间的交互及注意事项
2017/08/08 HTML / CSS
会计专业自我鉴定范文
2013/10/06 职场文书
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
手机业务员岗位职责
2013/12/13 职场文书
电钳专业个人求职信
2014/01/04 职场文书
五四青年节优秀演讲稿范文
2014/05/28 职场文书
学习十八大演讲稿
2014/09/15 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
2014小学教师个人工作总结
2014/11/10 职场文书
摘录式读书笔记
2015/07/01 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
《攀登者》:“海拔8000米以上,你不能指望任何人”
2019/11/25 职场文书
python爬虫请求库httpx和parsel解析库的使用测评
2021/05/10 Python