javascript无限滚动核心是监听scroll事件，通过scrolltop+clientheight≥scrollheight-threshold判断临界点，配合防抖、isloading状态和hasmore标识防止重复加载，支持window及自定义容器滚动。
JavaScript实现滚动监听和无限滚动加载，核心是监听容器（通常是window或某个滚动容器）的scroll事件，结合scrollTop、scrollHeight和clientHeight判断是否接近底部，再触发数据加载逻辑。
监听滚动并判断是否到底部
关键在于实时计算“是否快到容器底部”。对窗口滚动，常用公式：
scrollTop + clientHeight >= scrollHeight - threshold
其中threshold是提前触发的距离（如100px），避免用户已到底部才开始加载导致卡顿。
立即学习“Java免费学习笔记（深入）”；
示例代码：
function handleScroll() {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const clientHeight = window.innerHeight;
const scrollHeight = document.documentElement.scrollHeight;
const threshold = 100;
<p>if (scrollTop + clientHeight >= scrollHeight - threshold) {
loadMoreData();
}
}</p><p>window.addEventListener('scroll', handleScroll);
防抖处理避免高频触发
滚动事件非常频繁，不加限制会导致重复请求或性能问题。推荐用防抖（debounce）控制执行频率：
- 定义一个定时器ID变量（如
let timer = null） - 每次触发
scroll时先清除旧定时器，再设新定时器 - 延迟100–200ms执行判断逻辑，兼顾响应与性能
也可使用 Lodash 的 debounce，或手写简易版：
function debounce(fn, delay) {
let timer;
return function () {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, arguments), delay);
};
}
<p>window.addEventListener('scroll', debounce(handleScroll, 150));
加载状态管理与节流防重复
无限滚动必须防止“多次滚动触发多次加载”，需维护加载状态：
- 用布尔值
isLoading标记当前是否正在请求 - 请求开始前设为
true，成功/失败后重置为false - 在
handleScroll开头加if (isLoading) return - 可配合
hasMore标识是否还有下一页数据，彻底停止监听
示例片段：
let isLoading = false;
let hasMore = true;
<p>async function loadMoreData() {
if (isLoading || !hasMore) return;
isLoading = true;</p><p>try {
const data = await fetch('/api/items?offset=...').then(r => r.json());
appendItems(data);
hasMore = data.length > 0; // 或服务端返回 has_more 字段
} finally {
isLoading = false;
}
}
兼容容器滚动（非窗口）
若内容在某个<div class="list-container">内滚动，需监听该元素而非<code>window：
- 获取容器：
const container = document.querySelector('.list-container') - 监听：
container.addEventListener('scroll', ...) - 取值改为：
container.scrollTop、container.scrollHeight、container.clientHeight - 注意：该容器需有明确高度和
overflow-y: auto
同时建议加上will-change: scroll-position提升滚动性能（CSS中设置）。
