<p>实现无限滚动需准确检测触底并控制请求。1. 通过 scrollY + clientHeight >= scrollHeight - threshold 判断是否接近底部，建议设置阈值如100px以提前加载；2. 使用 loading 状态防止重复请求，维护页码变量 page 控制分页，结合防抖或节流优化 scroll 事件监听；3. 新数据插入时统一追加至容器末尾，避免滚动跳动，固定高度可预估布局减少重排；4. 数据为空或达最大页时关闭加载。关键在于检测精准、请求可控、体验流畅。</p>
在实现无限滚动加载功能时，核心在于准确检测用户是否已滚动到页面底部，并在此时触发新的数据请求。这种设计能提升用户体验，避免传统分页的频繁点击，但需处理好性能与请求频率的问题。
触底检测的实现方式
判断用户是否触底，通常依赖于页面滚动位置、可视区域高度和文档总高度之间的关系。
- 通过 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;
<p>async function loadMore() {
if (loading) return;
loading = true;</p><p>const data = await fetch(<code>/api/list?page=${++page}</code>);
const items = await data.json();</p><p>appendToDOM(items);
loading = false;
}数据加载完成后的处理
新数据插入页面后，可能会影响原有滚动状态，甚至导致“跳动”现象。需要确保体验平滑。
- 合理组织 DOM 结构，将加载内容统一追加到容器末尾
- 若列表项高度固定，可预估整体高度，减少重排影响
- 在数据为空或已达最大页数时，关闭加载机制，避免无效请求
基本上就这些。触底检测要准，请求控制要稳，用户体验才能顺。不复杂但容易忽略细节。
