无限滚动加载实现方法详解

本文深入解析了现代前端实现无限滚动加载的最佳实践，强调摒弃性能低下且易出错的 window.onscroll 监听，转而采用 Intersection Observer API 观察占位元素进入视口来高效触发数据加载；内容涵盖关键配置（如 rootMargin 提前加载）、防重复请求与状态同步、后端分页响应的健壮校验、XSS 防护与 DOM 渲染安全、以及 iOS Safari 和微信浏览器等特殊环境下的兼容性降级策略，是一份兼顾性能、稳定性与安全性的实战指南。

用 Intersection Observer 监听滚动容器底部

无限滚动的核心不是监听 window.onscroll，而是用 Intersection Observer 观察一个占位元素是否进入视口——它性能好、不触发重排、兼容性也够（Chrome 51+/Firefox 55+/Safari 12.1+）。手动计算 scrollTop 和 scrollHeight 容易在缩放、iframe、滚动条宽度变化时出错。

实操建议：

• 在列表末尾插入一个
  作为观察目标
• 创建 observer 时设 rootMargin: '0px 0px 200px 0px'，提前 200px 触发加载，避免用户“拉到底才动”
• 每次加载完新数据后，重新调用 observer.observe(triggerEl)（因为 DOM 替换可能导致 target 脱离）
• 加载中状态要禁用重复触发：if (loading || hasMore === false) return;

fetch 请求必须带分页参数且校验响应结构

后端接口通常要求 page 或 offset + limit，前端不传或传错会导致重复加载同一页、漏数据甚至死循环。更关键的是，很多接口返回的 data 字段结构不一致（比如第一页有 total，后续页没有），直接用来判断是否还有下一页会失效。

实操建议：

• 维护一个 currentPage 变量，初始为 1，每次成功加载后 currentPage++
• 不要依赖响应体里模糊的 length === 0 判断结束，优先看后端明确返回的 has_more: true 或 next_cursor
• fetch 失败时要恢复 loading = false，否则滚动将永久卡住
• 加个简单防抖：连续触发两次 isIntersecting 为 true 时只发起一次请求（用 setTimeout + clearTimeout）

DOM 插入前必须做内容合法性检查

后端返回的 HTML 片段或 JSON 渲染结果若含