实现无限滚动的核心是监听滚动事件并适时触发加载，需结合scrollTop、clientHeight和scrollHeight判断触底，配合防抖与加载锁防止重复请求，最后插入新数据并更新分页参数。
实现无限滚动的核心是监听滚动事件，判断用户是否接近页面底部，再动态加载新内容。关键不在“一直滚动”，而在“适时触发加载”。
监听页面滚动并检测触底
通过 window.onscroll 或 addEventListener('scroll', ...) 监听滚动，结合元素尺寸与滚动位置判断是否接近底部：
- scrollTop：页面向上滚动的距离（即顶部被卷走的高度）
- clientHeight：可视区域高度（不含滚动条）
- scrollHeight：整个文档总高度（含不可见部分）
当 scrollTop + clientHeight >= scrollHeight - offset 时，就认为快到底部了。offset 通常设为 100～300px，避免用户一滑到底才触发，提升体验。
防抖处理避免频繁触发
滚动事件非常密集，不加控制会导致重复请求或卡顿。推荐用简单防抖：
立即学习“Java免费学习笔记（深入）”；
- 定义一个定时器变量（如
let scrollTimer = null） - 每次滚动时先清除旧定时器：
clearTimeout(scrollTimer) - 再设置新定时器，延迟 100～200ms 后执行检测逻辑
这样既保证响应及时，又不会在快速滚动中反复加载。
加载中状态与节流保护
防止用户多次快速触底导致重复请求，需加加载锁：
- 声明一个布尔值
let isLoading = false - 检测到触底时，先判断
if (isLoading) return - 加载开始前设为
true，请求完成（无论成功失败）再设回false
配合防抖，双重保障更稳妥。
插入新数据并更新 DOM
加载成功后，把新数据渲染到列表末尾即可：
- 用
element.insertAdjacentHTML('beforeend', htmlStr)追加 HTML - 或用
element.append(...nodes)插入 DOM 节点（更安全） - 记得更新“最后一页”标识或分页参数（如
page++），避免重复拉取同一批数据
如果列表有固定高度容器（如带 overflow-y: auto 的 div），需监听该容器的 scroll 事件，并用它的 scrollTop/scrollHeight 等属性，而非 window。
基本上就这些。不复杂但容易忽略防抖和加载锁，上线前务必测试快速滚动、网络延迟、重复触发等边界情况。
