JS實現(xiàn)滾動條觸底加載更多

更新時間：2019年09月19日 13:08:49 作者：治電小白菜

這篇文章主要介紹了JS滾動條觸底加載更多,需要的朋友可以參考下

原理

1.通過監(jiān)聽滾動區(qū)域DOM的scroll事件, 計算出觸底

// 滾動可視區(qū)域高度 + 當前滾動位置 === 整個滾動高度
scrollDom.clientHeight + scrollDom.scrollTop === scrollDom.scrollHeight

2.觸底后觸發(fā)列表添加, 列表添加使用createDocumentFragment, 將多次插入的DOM先存入內(nèi)存, 最后一次填充進去, 提高性能, 也方便后面的MutationObserver監(jiān)聽

3.使用MutationObserver監(jiān)聽列表的DOM添加, 添加完畢后, 隱藏加載中提示

示例

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

參考資料

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 // 列表個數(shù)
  const listDom = document.getElementById('js-list')
  const loadingDom = document.getElementById('js-loading')
  /**
   * 使用MutationObserver監(jiān)聽列表的 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 滾動可視區(qū)域高度
   * 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() // 加載完畢停止監(jiān)聽列表 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>

總結(jié)

以上所述是小編給大家介紹的JS實現(xiàn)滾動條觸底加載更多,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章: