在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) 做微任务兜底。
