局部滚动内容更新需满足三要素：滚动容器（固定高度、禁用%单位、避免transform干扰）、IntersectionObserver监听触底加载、replaceChildren()安全更新内容并保持滚动位置。
局部滚动内容更新 = 滚动容器 + 动态加载新内容 + 无缝拼接，三者缺一不可。只设overflow-y: auto但不控制加载时机，会卡死；只拉数据但没处理滚动位置，会跳视口；不校验容器是否可滚动，scrollTop永远是0。
滚动容器必须有固定高度且可计算 scrollHeight
这是所有后续操作的前提。没有明确高度的容器，浏览器不创建滚动上下文，scrollTop、scrollHeight、clientHeight全不可靠。
-
height或max-height必须用px、vh、rem等绝对单位，禁用%（除非父级height也写死） - 若容器是
flex子项，加flex-shrink: 0，否则可能被压缩到height: 0 - 避免父级带
transform、filter或perspective——它们会破坏offsetTop计算，此时必须改用getBoundingClientRect() - Safari 下偶发滚动条不出现？把
overflow-y: auto换成overflow-y: scroll强制显示
用 IntersectionObserver 替代 scroll 事件监听触底
在scroll里读scrollTop和scrollHeight会强制同步 layout，长列表中极易掉帧。真实项目应避开它。
- 监听容器底部“占位元素”是否进入视口：在容器末尾插入一个
- 用
IntersectionObserver观察该元素：new IntersectionObserver(cb, { root: container }) - 回调中检查
entries[0].isIntersecting，为真则触发加载，再调用fetch()拉新 HTML 或 JSON - 加载完成后，用
replaceChildren()或insertAdjacentHTML('beforeend', html)追加内容，不重置scrollTop
加载后保持滚动位置并防重复触发
新内容插入后，容器高度变大，但用户可能正停留在旧内容中部。直接追加会导致视口“上跳”，体验断裂。
- 插入前记录当前
scrollTop，插入后立即恢复：const pos = container.scrollTop; /* 插入 */; container.scrollTop = pos; - 但更稳妥的做法是：仅当用户已滚动到底部时才加载，并让新内容自然延展——此时
scrollTop本就接近最大值，无需手动干预 - 防重复请求：加载开始时禁用触发器（如隐藏
#loader-trigger或设observer.unobserve(trigger)），成功后再重新观察 - 失败后需恢复触发器，并提示错误，否则用户无法重试
用 fetch + replaceChildren() 更新内容最安全
比起innerHTML，replaceChildren()不解析字符串为可执行代码，天然防 XSS；也不销毁已有事件监听器（如果你保留了部分节点）。
- 后端返回纯 HTML 片段（不含
、），前端直接传入：container.replaceChildren(...newContent) - 若后端返回 JSON，用 JS 构造 DOM 节点再传入：
container.replaceChildren(...data.map(item => createItemEl(item))) - IE 不支持
replaceChildren()？降级用container.textContent = ''再appendChild()，别用innerHTML = ''清空——它也会触发 XSS 风险 - 务必在
fetch()后检查response.ok，404/500 返回的 HTML 错误页塞进容器会破坏结构
真正容易被忽略的不是“怎么加滚动”，而是“怎么判断该不该加”：容器是否已被渲染、是否在 viewport 内、是否已被其他逻辑接管（比如框架的 hydration）。这些状态不校验，IntersectionObserver可能绑定失败，replaceChildren()可能报null，所有逻辑都会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
