js实现滚动条触底后加载内容

2022-12-09 0 730

原理

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

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

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

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

 <div id="<a href="https://www.nzw6.com/tag/js" title="查看所有文章关于 js"target="_blank">js</a>-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>

 

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论