在index.html中实现无限滚动加载效果的方法

用 Intersection Observer 实现无限滚动的核心是观察占位元素是否进入视口，而非监听 window.onscroll；需设 rootMargin 提前触发、每次加载后重新 observe、校验响应结构、防重复请求与 XSS、降级处理兼容性问题。

用 Intersection Observer 监听滚动容器底部

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

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 在列表末尾插入一个 <div id="loader-trigger"></div> 作为观察目标
• 创建 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 渲染结果若含 <script>、onerror 等可执行内容，直接 innerHTML 插入会引发 XSS；若返回空数组或字段缺失（如 items 不存在），不检查就遍历会报 Cannot read property 'map' of undefined。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 永远先做 Array.isArray(data.items) && data.items.length > 0 再渲染
• 避免用 innerHTML += ... 拼接，改用 documentFragment 或 insertAdjacentHTML('beforeend', htmlStr)
• 如果后端返回的是纯 HTML 字符串，确保它来自可信源；否则用 textContent 渲染或 DOMPurify.sanitize() 过滤
• 加载完成但无新数据时，应把 hasMore = false 并可选地显示“没有更多了”提示

移动端 Safari 下的常见断裂点

在 iOS Safari 中，IntersectionObserver 对 position: sticky 容器或 overflow: auto 的父容器支持不稳定；另外，键盘弹出/收起会触发 resize 和 scroll，可能误触发加载；某些微信内置浏览器还会禁用 IntersectionObserver 的 rootMargin。

实操建议：

立即学习“前端免费学习笔记（深入）”；

• 把观察目标（trigger）放在最外层滚动容器内，且该容器必须是 body 或明确设置了 overflow-y: auto 的元素
• 降级方案：检测 'IntersectionObserver' in window 不通过时，回退到 getBoundingClientRect() 手动判断位置
• 监听 resize 事件，在键盘收起后手动调用一次 observer.takeRecords() 补检
• 微信环境可加 UA 判断：navigator.userAgent.includes('MicroMessenger')，对 observer 配置加 threshold: 0.1 提高灵敏度

最常被忽略的是 loading 状态与 DOM 更新的时机差——比如刚 append 新节点，trigger 元素还没重绘，observer 就认为它已离开视口。这时候需要在 requestAnimationFrame 里再 observe 一次，或者给 setTimeout(..., 0) 做微任务兜底。