局部滚动容器触底监听需用容器自身scrollTop/clientHeight/scrollHeight计算，或用IntersectionObserver设root为该容器；插入新内容前记录scrollTop并恢复，避免跳动；后端需明确返回无更多数据标识以终止加载。
局部滚动容器怎么监听触底
不是监听 window，而是监听具体滚动容器（比如 <div class="list-container">）的 scroll 事件。关键在于：它的 scrollTop、clientHeight、scrollHeight 都得从该元素上取，不能混用 document 或 body 的值，否则在局部滚动场景下判断永远不准。
常见错误是写成 document.documentElement.scrollTop，结果容器明明在动，却始终不触发加载。正确做法：
- 给容器设
overflow-y: auto或scroll，并明确高度（如height: 400px） - 用
container.addEventListener('scroll', handler) - 在
handler中读取container.scrollTop、container.clientHeight、container.scrollHeight - 判断条件用
scrollTop + clientHeight >= scrollHeight - 50（50 是缓冲像素，防临界抖动）
IntersectionObserver 怎么用在局部滚动里
比手动算 scroll 更稳，尤其当容器内有图片懒加载、动态插入广告等导致高度突变时。它不依赖滚动事件，主线程不卡，也不怕浮点误差。
要点：
立即学习“前端免费学习笔记（深入）”；
- 在列表末尾放一个占位
<div id="load-trigger"></div>，始终保留在 DOM 中 - 创建 observer 时传
{ root: container, rootMargin: '0px 0px 100px 0px' }，让容器为根，提前 100px 触发 - 回调里先
observer.unobserve(triggerEl)，防重复；等新数据插入后，再observer.observe(triggerEl)恢复监听 - 别用
document.body当root，否则监听的是整个页面视口，不是你那个局部容器
插入新内容时怎么避免滚动跳动
直接 container.innerHTML += newHtml 或 container.append(...nodes) 后，浏览器会重排布局，如果新条目高度不一致，滚动条位置大概率偏移——用户正看到第 8 条，一加载完突然跳到第 6 条，体验极差。
解决方式很实际：
- 加载前记录
const prevScrollTop = container.scrollTop - 插入后立刻执行
container.scrollTop = prevScrollTop（多数情况够用） - 更精准的做法：用
container.lastElementChild?.offsetTop记下最后一项距顶部距离，插入后对比新增高度差，用container.scrollBy(0, delta)补偿 - 所有列表项必须有可预测高度（哪怕设
min-height: 64px），否则浏览器无法稳定计算布局变化
后端返回空数据或报错时怎么收尾
很多实现只管“有数据就加”，但“没数据了”这个信号必须主动终结，否则用户一直拉、一直转圈、最后白屏。
终止逻辑要分三层处理：
- 网络失败（
fetch抛异常）：显示“加载失败”，加个“重试”按钮，别静默吞掉 - 响应成功但
response.data.items.length === 0或response.data.has_more === false：置本地hasMore = false，隐藏“加载更多”按钮，且不再调observe()或绑定scroll事件 - 接口返回
next_offset为null或0：同样视为终点，别再拼请求 URL
最容易被忽略的是：服务端返回空数组却不带任何标识字段。这事必须和后端提前约定清楚——要么加 has_more，要么统一用 HTTP 状态码 204 表示无更多，前端才能可靠收手。
