主页 / 网络编程 /

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

网络编程 2021-07-04 15:01www.168986.cn编程入门

这篇文章主要介绍了JS滚动条触底加载更多,需要的朋友可以参考下

原理

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

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

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

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

示例

参考资料

代码

<!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实现滚动条触底加载更多,希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！
如果你觉得本文对你有帮助，欢迎网络推广网站推广转载，烦请注明出处，谢谢！

上一篇：vue简单练习桌面时钟的实现代码实例下一篇：Vue v-text指令简单使用方法示例

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

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设

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

编程语言

狼蚁网络搜索

狼蚁网络导航

长沙seo优化

长沙网络营销

长沙网站建设