必须同时满足entries[0].isintersecting为true且target等于预设占位节点才触发加载，rootmargin至少设为'0px 0px 200px 0px'，滚动容器需设height/max-height和overflow-y:auto，禁用innerhtml+=改用documentfragment或insertadjacenthtml，终止加载需分层校验网络、响应、游标状态。
IntersectionObserver 的 rootMargin 和 isIntersecting 怎么配才不误触发
直接用 isIntersecting 判断但不加校验，或 rootMargin 设成 '0px'，会导致 iOS Safari 或快速滑动时反复触发——尤其在广告插入、图片懒加载未完成时，占位元素可能短暂进出视口。必须同时满足两个条件才加载：entries[0].isIntersecting === true，且该 entry 对应的 target 是你预设的占位节点（比如 document.getElementById('sentinel')）。
实操建议：
- rootMargin 至少设为 '0px 0px 200px 0px'：提前 200px 触发，留出网络+DOM 插入时间
- 回调里第一行就写 if (!entries[0] || entries[0].target !== sentinelEl || !entries[0].isIntersecting) return;
- 加载开始后立刻 observer.unobserve(sentinelEl)，等新 DOM 插入完成再 observer.observe(sentinelEl)，别删节点，重用即可
滚动容器没高度，IntersectionObserver 就失效
在很多 UI 框架（如 Ant Design、Element Plus）或自定义布局中，列表被包在 div 里，而这个容器没设明确高度或 overflow-y，IntersectionObserver 的 root 默认是 document，但实际观察范围会变成整个页面——导致占位元素永远“在视口内”，一初始化就触发多次。
实操建议：
- 容器必须有 height 或 max-height（例如 max-height: 70vh）
- 必须设 overflow-y: auto（不能是 scroll 或默认值）
- 移动端额外加 touch-action: pan-y，禁用横向拖拽干扰
- 如果用 body 滚动而非局部容器，root 可显式传 null，但要确保 document.body.scrollHeight 可靠（iOS Safari 认这个，document.documentElement.scrollHeight 在部分场景返回 0）
innerHTML += 新内容为什么越滚越卡
每次用 innerHTML += htmlString，浏览器都要销毁旧 DOM、重新解析整段 HTML、重建所有节点、重新绑定事件——列表超过 200 条后，单次插入耗时直线上升，iOS Safari 键盘弹起后恢复滚动还会跳屏。
实操建议：
- 用 document.createDocumentFragment() 批量创建节点，最后一次性 appendChild()
- 如果后端返回的是 HTML 字符串，改用 insertAdjacentHTML('beforeend', htmlStr)，它不破坏已有事件监听器（前提是没用内联 onclick）
- 列表项有交互？统一用事件委托绑到父容器，别给每个新 li 单独 addEventListener
- 插入前记录 container.scrollTop，插入后立即恢复，避免视觉跳动（注意：不是设回原值，而是补偿新增内容高度）
空数据、网络失败、游标为空，怎么才算真正“到底”
只检查 response.data.length === 0 就停，很容易把网络超时、502、游标失效当成“终点”，结果用户白屏、控制台报错、无限 loading。真正的终止必须分层判断，且每层都得清理状态。
实操建议：
- fetch 抛异常 → 最多重试 1 次，之后设 loading = false，显示“点击重试”按钮
- 响应成功但 response.data.length === 0 或 response.hasMore === false → 立即 observer.unobserve(sentinelEl)
- 游标字段（如 next_cursor）为 null、'' 或 undefined → 同上，视为终点
- 所有路径的 finally 块里都重置 loading = false，否则一次失败就锁死后续滚动
最麻烦的不是写加载逻辑，而是让“加载中”状态和 DOM 插入时机严丝合缝——漏掉任意一个 unobserve、少写一次 loading = false、或容器缺了 max-height，都会在特定机型或网络条件下突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
