JS 原生实现触底加载

创建一个容器来存储列表项。
监听滚动事件，当滚动接近底部时触发加载更多操作。
加载更多数据后，将新数据附加到容器中。

以下是一个简单的示例：


html>
<html>
 
<head>
  <style>
    #scroll-container {
      height: 200px;
      overflow: auto;
    }
 
    .item {
      height: 50px;
      background: #eee;
      margin-bottom: 10px;
    }
  style>
head>
 
<body>
  <div id="scroll-container">
    <div class="item">Item 1div>
    <div class="item">Item 2div>
    <div class="item">Item 3div>
    <div class="item">Item 4div>
    <div class="item">Item 5div>
    
  div>
 
  <script>
    const scrollContainer = document.getElementById("scroll-container");
    scrollContainer.addEventListener("scroll", () => {
      // scrollContainer.scrollTop : 当前可视化到容器最顶部的距离
      // scrollContainer.clientHeight ： 当前可视化的高度
      // scrollContainer.scrollHeight ： 当前容器的滚动高度
      if (
        scrollContainer.scrollTop + scrollContainer.clientHeight >=
        scrollContainer.scrollHeight
      ) {
        // Load more data and append it to the container
        for (let i = 0; i < 5; i++) {
          const newItem = document.createElement("div");
          newItem.className = "item";
          newItem.textContent = `Item ${scrollContainer.childElementCount + 1}`;
          scrollContainer.appendChild(newItem);
        }
      }
    });
  script>
body>
 
html>

触底加载

相关阅读:
java计算机毕业设计高校学生党建管理系统源码+mysql数据库+系统+lw文档+部署
4.矩阵的几何意义、变基与迹
【JUC源码专题】ReentrantReadWriteLock 核心源码分析（JDK8）
【JVM】jvm的类加载机制
【1014T2】半假结论通过打表验证
用python写MapReduce函数——以WordCount为例
MVC Controlle View Model之间新建类
React动态添加标签组件
咖啡技术培训：6款创意咖啡拿铁教程
CVE-2022-41082：Microsoft Exchange 反序列化类型混淆 RCE 漏洞简单分析

原文地址：https://blog.csdn.net/wu_2004/article/details/133809277