overflow-anchor: none 能关闭浏览器自动微调滚动位置的行为，但仅对设置了 overflow-y: auto/scroll 且有固定高度的滚动容器生效；写在 body/html 上无效，safari 和 firefox 不支持。
直接结论：overflow-anchor: none 能关掉浏览器自动微调滚动位置的行为，但只对设置了 overflow-y: auto 或 scroll 且有固定高度的容器生效；写在 body 或 html 上完全无效，Safari 和 Firefox 当前也不支持它。
为什么加了 overflow-anchor: none 还在跳？
不是 CSS 写错了，而是没命中生效条件：
- 目标容器没设
overflow-y: auto或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 用户还在跳？这不是你的问题
overflow-anchor 在 Safari 中**完全不支持**（截至 2026 年 6 月），既不生效也不报错。Chrome/Edge 里写的 none，在 Safari 里等于没写：
- 不能靠它做跨浏览器一致性防跳动，必须降级：用
MutationObserver监听插入，在requestAnimationFrame里恢复scrollTop - 图片/iframe 插入前，用
aspect-ratio或padding-bottom预留空间，从根源减少高度突变 - 慎用
scrollIntoView()，它会触发浏览器重新计算锚点，和overflow-anchor: none逻辑打架
最易被忽略的一点：overflow-anchor 只解决“锚点补偿”导致的跳动，对图片加载引发的重排、滚动条出现导致的盒模型跳动、或 focus() 强制滚动等场景完全无效——得用别的手段分别处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
