用IntersectionObserver监听底部占位元素最稳，因其不依赖滚动计算、性能好、兼容性够；需设rootMargin提前触发、用isIntersecting判断并及时unobserve/observe复用占位元素。
用 IntersectionObserver 监听底部占位元素是最稳的方案，不是靠算滚动距离，而是让浏览器原生判断“它进没进视口”——这能绕开 iOS Safari 渲染延迟、图片懒加载导致 scrollHeight 滞后、缩放错位等一堆坑。
为什么不用 window.addEventListener('scroll') 直接监听
滚动事件每秒可能触发几十次，里面一查 document.body.scrollHeight、一调 fetch，主线程立刻卡住。更麻烦的是：动态插入广告、图片还没加载完、甚至只是用户双指缩放，都会让 scrollHeight - scrollY - innerHeight 计算失准，出现“明明没到底却触发”或“拉到头了还不动”。IntersectionObserver 不依赖这些计算，它由浏览器底层调度，异步、低优先级、不阻塞渲染。
IntersectionObserver 怎么配 rootMargin 和 isIntersecting
rootMargin: '0px 0px 200px 0px' 是关键参数——它表示“目标元素离视口底部还有 200px 时就触发回调”，留出网络请求+DOM 插入的时间缓冲，避免用户拉到底才动。回调里必须检查 entries[0].isIntersecting === true 才执行加载，否则可能因页面重排、元素临时脱离视口而误判。常见错误是只监听一次就不管了：加载完新内容后，得立刻 observer.unobserve(loaderEl) 防重复，再 observer.observe(loaderEl) 恢复监听（别删 DOM 元素，重用即可）。
DOM 结构怎么搭才不跳动、不丢状态
所有列表项必须有明确高度：用 height、min-height 或 aspect-ratio，禁用 height: auto 加浮动/绝对定位；否则浏览器无法预估新增内容高度，插入后滚动条会突然上蹿或下掉。插入新节点必须用 append() 或 insertAdjacentElement('beforeend', el)，绝不能用 innerHTML +=——它会销毁已有事件监听器、React/Vue 组件实例、焦点状态和第三方插件（比如代码高亮）。如果后端返回的是 HTML 字符串，优先用 insertAdjacentHTML('beforeend', htmlStr)，但务必确认来源可信，否则要过 DOMPurify.sanitize()。
立即学习“前端免费学习笔记（深入）”；
最容易被忽略的是“终点信号”：后端必须返回明确的 hasMore: false 或 next_cursor: null，前端不能只靠 data.length === 0 判断终止——空响应可能是网络错误、权限不足或分页越界，不代表没下一页。一旦收到终结标识，就得立刻 observer.unobserve(loaderEl) 并移除监听逻辑，否则用户持续下拉只会看到白屏和控制台报错。
