直接结论：在滚动容器上加 overflow-anchor: none 能关闭浏览器自动滚动补偿，避免内容插入时视口跳动；但必须配合“触底检测”逻辑，否则用户向上翻页时新消息会把当前阅读位置顶走。
直接结论：在滚动容器上加 overflow-anchor: none，能关闭浏览器自动滚动补偿，避免内容插入时视口跳动；但必须配合“触底检测”逻辑，否则用户向上翻页时新消息会把当前阅读位置顶走。
什么时候该用 overflow-anchor: none
它只对有 overflow-y: auto 或 scroll 的容器生效，且仅影响该容器内部的滚动锚定行为。常见适用场景包括：
- 聊天窗口、日志列表这类不断追加内容、又要求“触底自动滚动”的区域
- 图文混排页面中，图片懒加载导致上方 DOM 高度突变，但你已用占位符或
aspect-ratio控制了布局 - 自定义滚动动画（如 scrollTo + easing）需要完全掌控滚动偏移，不能被浏览器偷偷修正
注意：overflow-anchor 不是全局开关，写在 body 上无效；必须作用于实际发生滚动的父容器元素。
为什么只设 none 还不够
禁用锚定后，浏览器不再尝试“稳住”视口，但这也意味着：只要新内容插入，滚动位置就按原生规则重算——即所有内容从顶部开始堆叠，scrollTop 值不变，但用户看到的内容就变了。典型问题：
立即学习“前端免费学习笔记（深入）”；
- 用户正在向上翻看历史消息，AI 突然流式输出一段文字，整个消息列表向下“沉”，当前视野文字瞬间消失
- 哨兵节点（
#anchor-sentinel）虽在底部，但因图片异步渲染，其offsetTop在首次观测时为 0，导致isIntersecting判定失准 -
IntersectionObserver的threshold: 1.0在高 DPR 屏幕或缩放下可能漏判，建议补一层scrollTop + clientHeight >= scrollHeight - 1容错
overflow-anchor 和 scrollTo 怎么配合才不打架
关键在于时机与行为选择：
- 触底状态（
isAtBottom === true）：用container.scrollTo({ top: container.scrollHeight, behavior: 'instant' })，instant避免动画叠加卡顿 - 非触底状态：**不要调用
scrollTo**，哪怕只写container.scrollTop = container.scrollTop都会触发一次重排，破坏自然锚定 - 如果容器内有图片或 iframe，务必提前设置宽高或
height: 0; padding-bottom: 56.25%占位，否则overflow-anchor: none也救不了视觉跳动
最易忽略的一点：滚动容器的 contain: layout paint 会干扰 IntersectionObserver 的检测精度，调试时可临时移除验证是否为该原因导致哨兵失效。
