无限滚动加载_触底检测与分页请求的处理

夢幻星辰 2025-12-02 00:00:00 次阅读

实现无限滚动需准确检测触底并控制请求。1. 通过 scrollY + clientHeight >= scrollHeight - threshold 判断是否接近底部，建议设置阈值如100px以提前加载；2. 使用 loading 状态防止重复请求，维护页码变量 page 控制分页，结合防抖或节流优化 scroll 事件监听；3. 新数据插入时统一追加至容器末尾，避免滚动跳动，固定高度可预估布局减少重排；4. 数据为空或达最大页时关闭加载。关键在于检测精准、请求可控、体验流畅。

在实现无限滚动加载功能时，核心在于准确检测用户是否已滚动到页面底部，并在此时触发新的数据请求。这种设计能提升用户体验，避免传统分页的频繁点击，但需处理好性能与请求频率的问题。

触底检测的实现方式

判断用户是否触底，通常依赖于页面滚动位置、可视区域高度和文档总高度之间的关系。

通过 window.scrollY 获取当前垂直滚动距离
使用 document.documentElement.clientHeight 获取视口高度
用 document.documentElement.scrollHeight 得到整个文档高度

当 scrollY + clientHeight >= scrollHeight 时，说明用户已接近或到达页面底部，可以发起下一页请求。

注意：考虑到网络延迟或滚动过快的情况，建议加入一定阈值（例如提前 100px 触发），提升加载流畅性：

const threshold = 100;
const isNearBottom = scrollY + clientHeight >= scrollHeight - threshold;

分页请求的控制策略

为了避免重复请求或过度加载，必须对请求行为进行有效管理。

设置一个 loading 状态标记，防止在上一次请求未完成时再次触发加载
维护当前页码 page，每次触底后递增并请求对应页数据
监听 scroll 事件时使用防抖（debounce）或节流（throttle），减少高频触发带来的性能损耗

示例逻辑：

let page = 1;
let loading = false;
async function loadMore() {
if (loading) return;
loading = true;
const data = await fetch(/api/list?page=${++page});
const items = await data.json();
appendToDOM(items);
loading = false;
}