在内容展示类的前端页面中，滚动到底部自动加载更多的无限滚动功能是非常常见的交互设计，它可以让用户无需手动点击分页按钮就能持续获取新内容，有效提升页面的使用流畅度。实现这个功能的核心是通过JavaScript监听页面的滚动行为，判断当前滚动位置是否已经到达容器底部，当满足条件时触发加载新数据的逻辑。
实现无限滚动的核心原理
要实现滚动到底部自动加载，首先需要明确几个关键的DOM属性，通过这些属性可以计算出当前滚动位置距离容器底部的距离：
- scrollTop：容器顶部到当前可视区域顶部的距离，也就是已经滚动出去的内容高度
- clientHeight：容器可视区域的高度，不包含滚动条和边框
- scrollHeight：容器内容的总高度，包括超出可视区域的部分
当scrollTop + clientHeight >= scrollHeight - 阈值时，就可以认为用户已经滚动到了容器底部附近，此时可以触发加载逻辑。这里的阈值可以根据需求设置，比如设置为50，代表距离底部还有50像素时就提前触发加载，提升用户体验。
基础实现步骤
1. 页面结构准备
首先我们需要准备一个容器用来展示内容，以及加载状态的提示区域：
<div class="content-container" id="contentContainer"> <!-- 初始内容会在这里动态生成 --> </div> <div class="loading-tip" id="loadingTip">加载中...</div> <div class="no-more-tip" id="noMoreTip" style="display: none;">没有更多内容了</div>
2. 模拟数据加载函数
这里我们先模拟一个异步加载数据的函数，实际开发中替换为真实的接口请求即可：
// 模拟数据总数
let totalDataCount = 50;
// 当前已加载的数据数量
let loadedCount = 0;
// 每次加载的数量
const pageSize = 10;
// 是否正在加载中
let isLoading = false;
// 模拟加载数据
function loadMoreData() {
return new Promise((resolve) => {
// 模拟接口请求延迟
setTimeout(() => {
const newData = [];
// 计算本次可以加载的数量
const canLoadCount = Math.min(pageSize, totalDataCount - loadedCount);
for (let i = 0; i < canLoadCount; i++) {
newData.push(`这是第 ${loadedCount + i + 1} 条内容`);
}
loadedCount += canLoadCount;
resolve(newData);
}, 1000);
});
}
3. 渲染数据到页面
编写函数将加载到的数据渲染到内容容器中：
// 获取DOM元素
const contentContainer = document.getElementById('contentContainer');
const loadingTip = document.getElementById('loadingTip');
const noMoreTip = document.getElementById('noMoreTip');
// 渲染数据到页面
function renderData(dataList) {
dataList.forEach(item => {
const itemElement = document.createElement('div');
itemElement.className = 'content-item';
itemElement.style.padding = '15px';
itemElement.style.borderBottom = '1px solid #eee';
itemElement.textContent = item;
contentContainer.appendChild(itemElement);
});
}
4. 监听滚动事件并判断加载时机
接下来编写滚动监听逻辑，判断是否需要触发加载：
// 滚动阈值，距离底部50px时触发加载
const scrollThreshold = 50;
// 检查是否需要加载更多
function checkLoadMore() {
// 如果正在加载或者已经没有更多数据，直接返回
if (isLoading || loadedCount >= totalDataCount) {
return;
}
// 计算距离底部的距离
const scrollTop = contentContainer.scrollTop;
const clientHeight = contentContainer.clientHeight;
const scrollHeight = contentContainer.scrollHeight;
// 距离底部小于等于阈值时触发加载
if (scrollHeight - scrollTop - clientHeight <= scrollThreshold) {
loadData();
}
}
// 执行加载数据
async function loadData() {
isLoading = true;
loadingTip.style.display = 'block';
try {
const newData = await loadMoreData();
renderData(newData);
// 如果加载完所有数据，显示没有更多提示
if (loadedCount >= totalDataCount) {
loadingTip.style.display = 'none';
noMoreTip.style.display = 'block';
}
} catch (error) {
console.error('加载数据失败', error);
} finally {
isLoading = false;
loadingTip.style.display = 'none';
}
}
5. 绑定滚动事件并初始化
最后将滚动事件绑定到容器上，并且初始化加载第一批数据：
// 绑定滚动事件
contentContainer.addEventListener('scroll', checkLoadMore);
// 初始化加载第一批数据
loadData();
优化建议
上面的基础实现已经可以正常工作，但是在高频触发的滚动事件中直接执行判断逻辑，可能会造成性能问题，建议添加节流优化：
// 节流函数
function throttle(fn, delay = 200) {
let lastTime = 0;
return function(...args) {
const now = Date.now();
if (now - lastTime >= delay) {
lastTime = now;
fn.apply(this, args);
}
};
}
// 使用节流后的滚动监听
contentContainer.addEventListener('scroll', throttle(checkLoadMore, 200));
另外如果内容容器不是页面的window对象，而是某个固定高度的div，需要确保该容器设置了overflow-y: auto样式，否则scrollTop等属性可能无法正确获取：
.content-container {
height: 500px;
overflow-y: auto;
}
常见问题说明
很多开发者在实现时会遇到判断不准确的问题，通常是因为混淆了不同元素的scroll相关属性。如果是整个页面滚动，需要监听window的scroll事件，并且使用document.documentElement或者document.body的对应属性计算，而如果是内部容器滚动，就需要使用容器本身的属性计算，二者不要混用。
还有加载状态的判断也非常重要，一定要在加载完成前设置isLoading为true，避免滚动时多次触发重复加载请求，导致数据重复或者接口压力过大的问题。
JavaScript无限滚动滚动事件自动加载前端开发修改时间：2026-06-17 19:00:48