JavaScript无限滚动核心是监听scroll事件，通过scrollTop+clientHeight≥scrollHeight-阈值判断触底，配合isLoading防抖、DocumentFragment批量插入及无数据提示等优化体验。
JavaScript实现无限滚动效果，核心是监听用户滚动行为，在接近页面底部时自动加载新数据并追加到列表末尾。
监听页面滚动位置
通过监听scroll事件，结合scrollTop、clientHeight和scrollHeight判断是否触底：
- scrollTop：页面顶部到视口顶部的距离
- clientHeight：视口高度（不包括滚动条）
- scrollHeight：整个文档内容高度（含不可见部分）
- 当scrollTop + clientHeight >= scrollHeight - 某个阈值（如100px）时，视为即将触底
防抖与加载状态控制
避免频繁触发请求，需加入简单防抖和加载锁：
- 用布尔变量（如isLoading）阻止重复请求
- 滚动事件中先检查isLoading，为true则直接返回
- 请求开始前设为true，成功/失败后重置为false
动态插入新数据
获取新数据后，推荐使用documentFragment或批量append提升性能：
立即学习“Java免费学习笔记（深入）”；
- 避免对每个新项都单独操作DOM（如反复appendChild）
- 可先拼接HTML字符串再一次性insertAdjacentHTML('beforeend', html)
- 或创建DocumentFragment，把所有新li节点先加进去，最后再挂载到容器
处理边界与用户体验
实际项目中需考虑更多细节：
- 加载完成且无更多数据时，可显示“没有更多了”提示，并停止监听或移除滚动监听器
- 网络失败应给出重试机制（如按钮或自动重试）
- 移动端要注意touchmove可能影响判断，建议统一用scroll事件并兼容window和element容器
- 首次加载完可调用scrollIntoView({ behavior: 'smooth' })保持滚动流畅感
