overflow-anchor: none 仅对设了 overflow-y: auto/scroll 且有固定高度的局部滚动容器生效；写在 body、html 或 contenteditable 上无效，safari 27 及旧版 firefox 兼容性差。
overflow-anchor: none 能关掉浏览器自动微调滚动位置的行为，但只对设置了 overflow-y: auto 或 overflow-y: scroll 且有固定高度的局部滚动容器生效；写在 body、html 或 contenteditable 元素上完全无效，Safari（截至 Safari 27）和旧版 Firefox 仍存在兼容性问题。
为什么加了 overflow-anchor: none 还在跳？
不是 CSS 写错了，而是没命中生效前提：
- 目标容器没设
overflow-y: auto或overflow-y: scroll（比如用了overflow: hidden，或根本没声明overflow） - 容器高度由内容撑开（无
height/max-height），浏览器压根不启用滚动锚定机制 - 样式写在了
body、html或非滚动父级上——这些元素本身不构成滚动上下文，属性被忽略 - 祖先元素显式写了
overflow-anchor: auto，覆盖了子容器的none（滚动锚定以“最近可滚动祖先”为作用域）
该加在哪个元素上？怎么配才起作用？
必须加在实际发生滚动的容器上，例如聊天列表、编辑器内容区、日志面板等：
- ✅ 正确示例：
.chat-list { overflow-y: auto; max-height: 500px; overflow-anchor: none; } - ❌ 错误写法：
div[contenteditable] { overflow-anchor: none; }——contenteditable元素通常不滚动，也不构成滚动上下文 - ❌ 错误写法：
body { overflow-anchor: none; }—— 除非你强制给body设了overflow-y: scroll，否则它不是滚动容器 - 高度必须可计算：仅用
height: 100%不够，需配合flex布局、position: absolute或明确像素值
auto 和 none 在插入新内容时的真实差异
设为 none 后，scrollTop 值不变，但新内容插入会导致视口内内容整体下移——这不是 bug，是预期行为：
-
auto（默认）：浏览器选一个锚点元素（通常是视口顶部最近的块级元素），插入新内容时悄悄上调scrollTop把它“钉住” -
none：完全禁用补偿，scrollTop不变，但用户看到的内容变了 - 所以仅靠
none无法实现“始终触底”，必须配合 JS 判断：container.scrollTop + container.clientHeight >= container.scrollHeight - 1，为真时再调用container.scrollTo({ top: container.scrollHeight, behavior: 'instant' })
Safari 用户还在跳？这不是你的问题
截至 Safari 27（2026 年 9 月发布），overflow-anchor 已支持，但实测中仍存在部分场景未触发或响应滞后；Firefox 行为不稳定（66+ 声称支持，但常忽略 none）。这意味着：
- 不能靠它做跨浏览器一致性防跳动，必须降级
- 真实项目中应搭配
MutationObserver监听 DOM 变化，在requestAnimationFrame内恢复scrollTop - 对图片/iframe 插入，优先用
aspect-ratio或padding-bottom预留空间，避免重排引发跳动
最容易被忽略的一点：这个属性只干预“内容插入时的渲染层补偿”，对 scrollIntoView()、focus()、JS 手动 scrollTop 修改完全无感——别把其他原因造成的跳动归咎于它没生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
