JavaScript无限滚动核心是监听滚动触底并加载数据，需判断接近底部、防重复触发、管理加载状态；推荐用IntersectionObserver替代scroll事件以提升性能。
JavaScript实现无限滚动，核心是监听滚动位置，在用户快到底部时自动加载新数据并追加到页面末尾。关键在于判断“是否接近底部”、避免重复触发、以及合理管理加载状态。
监听页面滚动并检测触底
通过监听 window.scroll 或目标容器的 scroll 事件，结合元素尺寸与滚动偏移量判断是否该加载：
- 用
document.documentElement.scrollTop || document.body.scrollTop获取垂直滚动距离 - 用
window.innerHeight获取视口高度 - 用
document.documentElement.scrollHeight获取整个文档高度 - 当
scrollTop + innerHeight >= scrollHeight - threshold（如减去100px防抖）即视为接近底部
防止重复加载和节流处理
滚动事件频繁触发，需加锁和节流保障性能与逻辑正确：
- 定义一个
loading = false状态变量，加载开始时设为true，完成后再置为false - 每次进入加载逻辑前先检查
if (loading) return - 可配合
setTimeout或requestIdleCallback做简单节流，或使用IntersectionObserver替代 scroll 监听（更推荐）
使用 IntersectionObserver 更优雅地监听“进入视口”
相比 scroll 事件，IntersectionObserver 性能更好、代码更简洁，适合监听“加载占位符”是否进入视口：
立即学习“Java免费学习笔记（深入）”；
- 创建一个空的
<div id="loader"></div>放在列表底部 - 用
new IntersectionObserver(callback).observe(loader)监听它是否可见 - 回调中触发加载，并在加载完成后重新 observe（如果还有更多数据）
- 兼容性注意：IE 不支持，需引入 polyfill 或降级为 scroll 方案
加载数据并渲染，更新状态
请求成功后，把新数据插入 DOM 并重置加载状态：
- 用
fetch或axios请求下一页数据，携带页码或游标（如cursor=xxx） - 将返回的数据用
innerHTML += ...或append(...)添加到列表容器 - 若接口返回
hasMore: false，可隐藏 loader 或显示“没有更多了” - 确保每次加载后更新分页参数（如
page++或替换cursor）
不复杂但容易忽略：记得在加载失败时恢复 loading = false，否则会卡死；移动端还需注意 body 滚动可能被 overscroll-behavior 或第三方库拦截，建议监听具体容器而非 window。
