JavaScript 实现滚动到底部自动加载数据的原理与代码

阿橙

发布时间：2026-10-13 | 2人浏览过

原创

通过监听页面滚动事件并计算当前可视区域与文档高度的差值，可以在用户滚动至底部时自动触发 AJAX 请求以加载更多内容，从而实现流畅的无限滚动体验。本文将分别介绍基于 jQuery 和原生 JavaScript 的实现方案。

核心原理

滚动到底部触发的核心在于判断三个关键数值：

scrollTop：滚动条距顶部的垂直高度（已滚动的距离）。
window.innerHeight：浏览器窗口可视区域的高度。
scrollHeight：整个文档的实际高度（包括不可见部分）。

当满足以下公式时，即认为到达了底部：

scrollTop + window.innerHeight >= scrollHeight - offset

其中 offset 是一个容差值（单位 px），用于在真正触底前的一小段距离提前触发加载，避免用户看到空白区域或造成延迟感。

准备工作

要实现此功能，你需要一个能够承载大量内容的容器（如 #content），确保其高度会随着内容的增加而动态增长，否则页面不会有滚动条，也就无法触发滚动事件。此外，通常需要配合异步请求（AJAX/Fetch）来动态插入新的 DOM 元素。

第1步：使用 jQuery 实现

如果你项目中已经引入了 jQuery，可以通过绑定 window 的 scroll 事件来实现。这种方法逻辑清晰，易于控制加载频率和次数。

操作入口：window scroll 事件绑定

在文档就绪后，为窗口绑定滚动监听函数。设置关键参数，包括触发阈值（range）、单次加载数量或占位高度（elemt）以及最大加载限制（maxnum）。

<script src="jquery.min.js"></script>
<script>
$(document).ready(function () {
    // 配置参数
    var range = 100;       // 距下边界长度/单位px，提前100px开始加载
    var maxnum = 5;        // 设置最多加载的次数，防止死循环
    var num = 0;           // 当前加载计数
    var isLoading = false; // 防止并发请求的锁
    
    $(window).scroll(function () {
        // 如果正在加载中，忽略后续滚动
        if (isLoading) return;
        
        var srollPos = $(window).scrollTop();     // 滚动条距顶部距离
        var totalheight = parseFloat($(window).height()) + parseFloat(srollPos);
        
        // 判断是否接近底部
        if ($(document).height() - totalheight <= range && num < maxnum) {
            isLoading = true; // 锁定
            loadDataAndAppend(num); // 执行加载逻辑
            num++;
        }
    });
});

function loadDataAndAppend(pageNum) {
    // 模拟Ajax请求获取数据
    setTimeout(function() {
        // 这里替换为你真实的API调用
        $('#content').append('<div class="item">新加载的内容 ' + pageNum + '</div>');
        isLoading = false; // 解锁
    }, 500);
}
</script>

注意事项：

务必加入 isLoading 标志位，防止用户在短时间内快速滚动导致同一批数据被多次请求。
如果数据是分批返回的，请确保服务器接口支持分页或增量加载。

第2步：使用原生 JavaScript 实现

如果不依赖第三方库，可以使用原生 DOM API 获取相关高度值。这是更通用且轻量级的方案，适用于现代所有浏览器。

操作入口：window.onscroll 或 addEventListener

通过读取 document.documentElement 或 body 的相关属性来计算当前位置。

<script>
// 使用 addEventListener 推荐方式
window.addEventListener('scroll', function () {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
    const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
    
    // 判断条件：滚动位置 + 可视高度 - 阈值 >= 总高度
    // 这里的 threshold 可以根据需求调整，例如设为 100
    const threshold = 100;
    
    if (scrollTop + clientHeight - threshold >= scrollHeight) {
        console.log("即将触底或已触底，准备加载数据");
        fetchMoreData();
    }
});

function fetchMoreData() {
    // 在此处编写加载数据的逻辑
    // 注意：同样需要防抖或节流处理，以及防止重复请求的标志位
}

常见问题与排错

为什么没有触发加载？
检查包裹内容的父容器是否设置了固定高度而没有让内容撑开。如果容器高度等于可视区域高度，页面将无滚动条。
检查 scrollHeight 是否正确反映了新增内容后的实际高度。动态插入 HTML 后，浏览器会重排布局，确保在下一帧或稍后时间点再进行判断通常更安全。
为什么加载了过多数据？
这通常是因为没有设置“最大加载次数”或“数据总量”上限。建议在前端记录已加载的数量，并在后端接口中校验，达到上限后不再请求或提示“没有了”。
滚动事件过于频繁如何优化？
可以引入“节流”（Throttle）机制，例如使用 Lodash 的 _throttle，或者自己实现简易节流：记录上次执行时间，间隔不足 100-200ms 则跳过计算。