overflow-anchor 是用于控制滚动锚定行为的 css 属性，auto 默认启用浏览器自动稳定视口位置，none 则禁用该机制，但仅在 chrome 82+/edge 88+ 中稳定生效，safari 和旧版 firefox 完全不支持。
overflow-anchor 在 Safari 和旧版 Firefox 中根本不存在
这不是“失效”，而是压根不支持。Safari（截至 2026 年 6 月）完全未实现 overflow-anchor，所有声明都会被忽略；Firefox 虽在 66+ 版本声称支持，但实际行为不稳定——比如设为 none 后仍触发锚定微调，或仅对部分容器生效。Chrome 82+/Edge 88+ 是目前唯一能稳定响应该属性的主流引擎。
写了 overflow-anchor: none 却没作用，大概率是容器没满足滚动前提
这个属性只在同时满足以下三个条件时才起效：
- 目标元素设置了
overflow-y: auto或overflow-y: scroll（overflow: hidden或未声明 overflow 都无效） - 该元素有明确的
height或max-height（靠内容撑开的高度不算） - 它确实是实际发生滚动的容器（不是
body、html，也不是contenteditable元素本身）
常见错误：给 .chat-list 父级加了样式，但它内部子元素用 flex: 1 填满高度，导致无溢出、无滚动上下文，overflow-anchor 直接被浏览器丢弃。
父级 overflow:auto 创建了局部滚动上下文，把锚定逻辑“截胡”了
如果目标容器的某个祖先（哪怕隔了两层）设置了 overflow: auto 或 scroll，浏览器会把它当作“最近可滚动祖先”，overflow-anchor 的作用范围就被限制在这个局部上下文中。此时即使你在子容器上写了 none，只要父容器没同步关闭，锚定补偿仍可能从父级发起。
验证方法：DevTools → Layout 面板 → 检查该祖先是否被标记为 “Scrolling Container”；临时方案：把父级的 overflow: auto 改成 overflow: clip（Chrome 93+/Firefox 97+ 支持），它裁剪但不创建新滚动上下文。
auto 和 none 的行为差异被误读，导致“以为失效”
overflow-anchor: auto 不是“保证不跳”，而是让浏览器选一个锚点元素（通常是视口内最靠上的块级元素）并尝试稳住它；如果那个元素被 display: none、visibility: hidden 或脱离文档流，锚定就降级或失效——看起来像“自动关闭”，其实是机制 fallback。
overflow-anchor: none 也并非“绝对不跳”：它只是禁用渲染层的自动补偿，但 JS 调用 scrollIntoView()、focus() 或插入后手动 scrollTop 修改，依然会引发滚动位移。很多人把其他原因造成的跳动归咎于 overflow-anchor 失效。
真正容易被忽略的是：这个属性只管“插入内容时的补偿”，不管“滚动定位”或“焦点强制滚动”。它既不是万能防抖开关，也不能替代 JS 对滚动位置的主动控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
