overflow-anchor 是控制浏览器动态插入内容时是否自动微调滚动位置以稳定视口的 css 属性；应设为 none 于无限滚动列表、评论区等需避免内容跳动的容器上，但 safari 不支持。
overflow-anchor 是什么，什么时候该用它
它不是用来“防止滚动”，而是控制浏览器在动态插入内容（比如图片加载、AJAX追加列表）时，是否自动微调滚动位置来“稳住”你正在看的那块内容。当你发现页面加载中文字突然往下跳、阅读位置丢失，大概率是滚动锚定在起作用——而 overflow-anchor 就是你能干预它的唯一 CSS 接口。
auto 和 none 的实际行为差异
默认值 auto 表示浏览器可自由选择锚点元素（通常是当前视口内最靠近顶部的块级元素），并在上方插入内容时向上微调滚动位置，让该元素看起来“没动”。none 则彻底关闭这个机制，新内容插入后页面高度直接增加，滚动条位置不变，但内容会向下位移——用户得自己手动滚回去。
- 设为
none后，scrollIntoView()或锚点跳转仍生效，只是失去“防跳动”补偿 -
auto不保证 100% 稳定：若锚点元素被display: none、visibility: hidden或脱离文档流，浏览器可能 fallback 到父级或失效 - 该属性不继承，必须显式写在目标容器上，不能只写在
html或body上指望全局生效
哪些地方加 overflow-anchor:none 最有效
不是整个页面都关掉就万事大吉，关键是要加在「内容会动态增长且你明确不想它影响当前滚动焦点」的容器上。典型场景：
- 无限滚动列表容器：
<div id="list-container" style="overflow-anchor: none; overflow-y: auto; height: 80vh;"> <li>富文本编辑器或评论区，用户正在输入时，新回复插入顶部会把光标顶走 → 在包裹评论流的 <code><section></section>上设overflow-anchor: none - 带固定 Header 的单页应用中，主内容区（
main）设overflow-anchor: none，避免路由切换时因 DOM 重排导致锚点错乱 - 慎用在
body或html：会导致所有锚点跳转（如#section2）失去平滑定位补偿，视觉上“硬着陆” - JavaScript 动态设置需用
element.style.overflowAnchor = 'none'，注意大小写是overflowAnchor（驼峰），不是overflow-anchor - 和
scroll-behavior: smooth共存时，none会禁用锚点跳转的平滑动画，仅保留瞬移效果 - 若容器本身无溢出（即没出现滚动条），
overflow-anchor无实际作用，不会触发任何行为
容易被忽略的兼容性与副作用
overflow-anchor 在 Chrome 56+、Edge 79+、Firefox 66+ 支持，但 Safari **完全不支持**（截至 2026 年 4 月）。这意味着你在 Safari 中写的 overflow-anchor: none 会被忽略，滚动跳动照旧发生——不能靠它做跨浏览器一致性保障。
