17370845950

实现无限滚动需准确检测触底并控制请求。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;
}

数据加载完成后的处理

新数据插入页面后，可能会影响原有滚动状态，甚至导致“跳动”现象。需要确保体验平滑。

• 合理组织 DOM 结构，将加载内容统一追加到容器末尾
• 若列表项高度固定，可预估整体高度，减少重排影响
• 在数据为空或已达最大页数时，关闭加载机制，避免无效请求

基本上就这些。触底检测要准，请求控制要稳，用户体验才能顺。不复杂但容易忽略细节。