17370845950

无限滚动需预判加载（如距底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 可覆盖

滚动优化不是为了炫技，而是让加载自然、不卡顿、不误触。选对方法比堆代码更重要。