虚拟列表监听scroll实现

<!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>虚拟列表监听scroll实现</title>
  </head>
  <body>
    <div
      id="conten"
      style="height: 500px; overflow-y: scroll; background-color: aqua"
    >
      <!-- 外层容器（高度为所有数据都展示的高度，用来撑起容器，展示滚动条） -->
      <div style="height: 50000px">
        <ul id="uul" style="text-decoration: none"></ul>
      </div>
    </div>

    <script>
      const list = new Array(Math.floor(500 / 50) + 4)
        .fill(1)
        .map((item, index) => index);
      const total = new Array(1000).fill(1).map((item, index) => index);

      // 初始展示首屏数据，多展示几条保证快速滑动能看到数据
      init(list);

      function init(arr, offset = 0) {
        uul.innerHTML = "";
        arr.forEach((item) => {
          const li = document.createElement("li");
          li.style = `text-align:center;height:50px;border:1px solid red;box-sizing: border-box;`;
          li.innerHTML = item + 1;
          uul.appendChild(li);
        });
        
        // 这里因为内容被滚动到上面去了，所以往下平移
        uul.style = `transform:translateY(${offset}px)`;
      }

      conten.addEventListener("scroll", (e) => {
        const top = e.target.scrollTop;
        const num = Math.floor(top / 50);
        // 截取要展示的数据
        const newList = total.slice(num, num + Math.floor(500 / 50) + 4);
        // 计算出偏移量
        const offset = top - (top % 50);
        init(newList, offset);
      });
    </script>
  </body>
</html>
虚拟列表监听scroll实现

推荐阅读更多精彩内容
