加 overflow-anchor: none 仍跳动，主因是未作用于实际滚动容器：该属性仅对设了 overflow-y: auto/scroll 且有固定高度的容器生效，写在 body、html 或非滚动父级上无效；firefox 和 safari 不支持，chrome/edge 才可用。
overflow-anchor: none 为什么加了还是跳
加了 overflow-anchor: none 却仍跳动，大概率是没写对作用对象。这个属性只对设置了 overflow-y: auto 或 overflow-y: scroll 的容器生效，写在 body、html 或父级非滚动容器上完全无效。
常见错误包括：
- 在全局样式里写
body { overflow-anchor: none; }—— body 本身不滚动，不触发锚定机制 - 目标容器用了
overflow: hidden或未设 overflow，导致属性被忽略 - 容器高度由内容撑开（即无固定高度 + 无 overflow），浏览器根本不会启用滚动锚定
正确做法：找到实际发生滚动的父容器（比如 .chat-list 或 .log-container），确保它有明确的 height 或 max-height，且设置了 overflow-y: auto，再在其上加 overflow-anchor: none。
auto 和 none 在触底自动滚动场景下的真实表现差异
overflow-anchor: auto（默认）会让浏览器尝试“稳住”当前视口内最靠近顶部的块级元素。插入新内容时，它会悄悄向上微调 scrollTop，试图让那个元素看起来还在原位——这在阅读长文时友好，但在聊天或日志流中，会导致刚加载的新消息把用户正在看的内容顶走。
overflow-anchor: none 则彻底关闭补偿，scrollTop 值不变，但新内容插入后，整个内容向下平移，用户看到的位置就变了。这不是 bug，是预期行为。
所以关键不是选哪个值，而是配合逻辑：
- 若需“始终触底”，必须监听滚动位置，在插入内容后手动
scrollTo(0, el.scrollHeight) - 若用户已向上滚动查看历史，则不应自动触底，得先判断是否原本就在底部（用
el.scrollTop + el.clientHeight >= el.scrollHeight - 1） - 仅禁用
overflow-anchor不足以实现稳定体验，它只是移除了干扰项
Chrome 以外的浏览器根本不认 overflow-anchor
overflow-anchor 是 Chrome 82+ 和 Edge 88+ 支持的特性，Firefox 和 Safari 当前（截至 2026 年 5 月）完全不支持该属性，既不生效，也不会报错。
这意味着：
- 你在 Chrome 里调通了
none行为，不代表其他浏览器也一样 - 不能靠它做跨浏览器一致性保障，尤其不能把它当作“防跳动”的唯一手段
- 对兼容性敏感的项目，建议降级方案：用占位符（如
padding-bottom或伪元素）预占新内容高度，或统一用 JS 控制scrollTop计算
简单验证方法：打开 DevTools → Elements → 选中滚动容器 → 看 Computed 面板里是否有 overflow-anchor 条目；没有，说明当前浏览器不支持。
和 scrollbar-gutter 混用时的隐藏冲突
如果你同时用了 scrollbar-gutter: stable（为滚动条预留空间），又设置了 overflow-anchor: none，要注意二者影响的是不同层面：
-
scrollbar-gutter解决的是滚动条出现/消失导致的布局偏移（宽度突变） -
overflow-anchor解决的是内容插入导致的滚动位置漂移（高度突变） - 两者不冲突，但都得独立配置；漏掉任一环节，都可能看到“半截跳动”——比如内容没跳，但右侧边栏闪一下
典型组合写法：
.log-view {
max-height: 400px;
overflow-y: auto;
scrollbar-gutter: stable;
overflow-anchor: none;
}
注意：scrollbar-gutter 必须和 overflow 同时存在才起作用，单独写无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
