无限滚动需预判加载（如距底300px触发），用节流/防抖控频，推荐Intersection Observer监听底部占位元素实现轻量提前加载，并处理失败重试、无数据提示及监听器清理。
无限滚动的核心是监听滚动位置，在用户快到底部时提前加载新数据；滚动事件本身容易高频触发，必须用防抖或节流控制执行频率，否则影响性能。
判断是否接近页面底部
关键不是等用户“已经滚到底”，而是预判——比如距离底部还有300px就触发加载。这样能避免白屏等待。
- 用 scrollHeight - scrollTop - clientHeight 判断（注意兼容性，IE需用 document.body 或 document.documentElement）
- 加载中状态要标记（如
loading = true），防止重复请求 - 加载完把
loading设为 false，并更新数据和 DOM
优化 scroll 事件监听
原生 scroll 每秒可能触发几十
次，直接写逻辑会卡顿。必须做限制：
- 节流（throttle）：固定间隔（如 100ms）最多执行一次，适合需要稳定响应的场景
- 防抖（debounce）：只在滚动停止后执行，适合“滚动结束才检查位置”的逻辑
- 现代方案可用 Intersection Observer 替代 scroll 监听：监听底部占位元素是否进入视口，更轻量、不卡主线程
用 Intersection Observer 实现更优雅的无限滚动
不用计算像素，也不用绑定 scroll，浏览器原生支持，性能更好：
- 创建一个空的
放在列表末尾 - 用
new IntersectionObserver观察它，回调中触发加载 - 加载完成后调用
observer.unobserve(loader)，新数据插入后再observe(loader) - 支持 rootMargin 设置偏移（如
{ rootMargin: '200px' }），实现“提前加载”
其他实用细节
真实项目中还要考虑边界情况：
- 加载失败要提示，并允许手动重试，不要静默吞掉错误
- 滚动到底部但无更多数据时，显示“没有更多了”，并停用加载逻辑
-
路由跳转或组件卸载时，记得清理事件监听器或 observer（
observer.disconnect()） - 移动端注意
touchmove也可能影响滚动行为，一般 Intersection Observer 可覆盖
滚动优化不是为了炫技，而是让加载自然、不卡顿、不误触。选对方法比堆代码更重要。
