手写虚拟列表

原生实现虚拟列表
思路：将渲染分为三个page：pre, cur, next维持一个page变量用于表示当前页码，使用容器存放 DOM fragment，监听 scroll 事件，设定加载阈值，在满足条件的时候加载下一个page，移除上一个page，并更新padding-top属性，为隐藏的page占位防止抖动
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>longList</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    #box {
      width: 300px;
      height: 500px;
      overflow-y: scroll;
      box-sizing: border-box;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="box_container"></div>
  </div>
  <script>
    (()=>{
      let page = 1; // current page  
      let size = 20; // number of item per page  
      const height = 50; // height of per item  
      const preLoadNum = 3; // pre load page number  
      // virtual padding bottom height for calculate threshold height
      const paddingBottom = 50;
      const boxHeight = 500; // scroll window viewport height
      // pages array, you can collect all block element array or only pre cur and next block element array
      let eleArr = []; 
      const box = document.querySelector('#box');  
      const boxContainer = document.querySelector('#box_container');  
      const {fragment, box: boxList} = createItem(page, size);  
      eleArr.push(boxList);  
      boxContainer.appendChild(fragment);  
      box.addEventListener("scroll", (e)=>{
        const scrollTop = e.target.scrollTop;
        // calculate threshold height use down to pre page height
        let nextHeight = page * (size * height) - boxHeight - paddingBottom;
        if(scrollTop >= nextHeight){ // render next page
          page++;
          // calculate loaded pages but not to render placeholder padding size
          let paddingTop = (page - preLoadNum) * (size * height);
          let fragment;
          // if current page block not exist then create block
          if (!eleArr[page - 1]) { // current page index is page - 1(start with 0)
            const {fragment: element, box: boxList} = createItem(page, size)
            fragment = element;
            eleArr.push(boxList);
          } else {
            fragment = eleArr[page - 1]
          }
          boxContainer.appendChild(fragment);
          // remove should being hide page block
          const hideElem = document.querySelector(`.page_${page - preLoadNum}`);
          if (hideElem) {
            // remove and save the placeholder with padding top
            boxContainer.removeChild(hideElem);
            boxContainer.style.paddingTop = `${paddingTop}px`;
          }
        } // else render the pre page
        else if ( scrollTop <= (page - preLoadNum + 1) * size * height + paddingBottom && page > preLoadNum) {
          page--;
          let paddingTop = (page - preLoadNum) * (size * height);
          // get not render block which is the first block before pre block
          const fragment = eleArr[page - preLoadNum];
          boxContainer.insertBefore(fragment, boxContainer.childNodes[0]);
          const hideElem = document.querySelector(`.page_${page + 1}`);
          if (hideElem) {
            // remove next block and update placeholder height
            boxContainer.removeChild(hideElem);
            boxContainer.style.paddingTop = `${paddingTop}px`;
          }
        }
      }, false);
    })()
    /** 
     * @description: create fragment 
     * @param {number} page : page number 
     * @param {number} size : number of item per page 
     * @return {Element, Element[]} : fragment and item element array 
     */
    function createItem(page = 1, size = 10){  
      const fragment = document.createDocumentFragment();  
      const box = document.createElement("div");  
      box.className = `page_${page}`;
      for(let i = 0; i < size; i++){
        const element = document.createElement("div");
        element.style.width = "100%";
        element.style.height = "50px";
        element.className = `item_${page * (i + 1)}`;
        element.innerText = `我是item——${((page - 1) * size) + i + 1}`;
        box.appendChild(element);
      }  
      fragment.appendChild(box);  
      return {fragment, box};
    }
  </script>
</body>
</html>