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

原理

通过监听滚动区域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>