用 intersectionobserver 监听底部占位元素最稳，因其不依赖滚动计算、性能好、兼容性够；需设 rootmargin 提前触发、用 isintersecting 判断并及时 unobserve/observe 复用占位元素。
用 IntersectionObserver 监听底部占位元素最稳
直接监听 window.onscroll 容易在 iOS Safari、动态图片加载、广告插入等场景下误判——document.body.scrollHeight 可能还没更新，或渲染延迟导致计算失准。用 IntersectionObserver 是现代方案的首选，它不依赖滚动位置计算，而是靠浏览器原生观察机制，性能好、兼容性够（Chrome 51+/Firefox 55+/Safari 12.1+）。
实操要点：
- 在列表容器末尾插入一个固定占位元素：
<div id="infinite-loader" style="height: 1px;"></div> - 初始化 observer 时设
rootMargin: '0px 0px 200px 0px'，提前 200px 触发，避免用户“拉到头才动” - 回调中一旦
entries[0].isIntersecting为true，立即调用observer.unobserve(loaderEl)防重复 - 新内容插入后，再调用
observer.observe(loaderEl)恢复监听（别删 DOM 元素，重用即可）
window.addEventListener('scroll') 怎么写才不卡顿
scroll 事件每秒可能触发几十上百次，里面直接跑 DOM 查询 + fetch 就是卡顿源头。不能只靠 setTimeout 防抖，更推荐 requestAnimationFrame 节流——它对齐浏览器渲染帧，既保证响应及时，又不会挤占主线程。
常见错误现象：
- 滚动时 UI 冻结、文字闪烁、输入框失焦
- 多次快速滚动触发多个并发请求，后发先回导致数据错序
- 用
document.documentElement.scrollHeight判断，IE 和部分安卓 WebView 返回 0
正确做法：
- 统一用
document.body.scrollHeight（iOS/Safari/主流安卓都认） - 判断条件写成：
window.scrollY + window.innerHeight >= document.body.scrollHeight - 100 - 节流逻辑必须包裹整个判断和加载调用，不是只包 fetch
- 加
isLoading状态锁，fetch 前检查，成功/失败后都重置
页面结构怎么搭才不容易滚动跳动
插入新内容后滚动条突然上蹿或下掉，本质是浏览器重排时无法预估新增 DOM 的高度。这不是“防跳动”的问题，而是“控布局”的问题。
关键约束：
- 所有列表项必须有明确高度：用
height、min-height或 CSSaspect-ratio，禁用height: auto且子元素浮动/绝对定位 - 容器不要用
innerHTML +=—— 会销毁已有事件监听器和 React/Vue 组件实例 - 插入必须用
append()、insertAdjacentElement('beforeend', el)或 DocumentFragment 批量挂载 - 如果高度真没法固定（比如图文混排），改用
transform: translateY()补偿：加载前记最后一项offsetTop，插入后算差值scrollBy(0, delta)
服务端返回空数据时怎么判断到底了
很多实现只看 response.ok 或 data.length === 0，结果接口返回 { code: 0, data: [], has_more: false } 却还在转圈，或者返回空数组但没带标识字段，就无限白屏。
必须和服务端约定明确的结束信号：
- 优先采用游标字段，如
next_cursor: null或next_url: null，比自增page=2更可靠 - 前端维护全局状态
let hasMore = true，每次 fetch 前都检查if (!hasMore || isLoading) return - 在
fetch().catch()和非 2xx 响应里显式设hasMore = false并提示用户，不静默吞错 - 首次加载完就插入占位元素，后续所有插入都追加到容器内，确保
#infinite-loader始终在 DOM 最末
最易被忽略的是：新内容插入后，document.body.scrollHeight 不会立刻反映变化，IntersectionObserver 依赖 DOM 存在，而 scroll 判断依赖 layout 完成——这两者都需要等浏览器重排完成，不能插完就立刻监听或计算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
