overflow-anchor 是用于控制滚动锚定行为的 CSS 属性，默认 auto 会自动稳定视口位置，防止内容加载时跳动；设为 none 可禁用该机制，但仅对具有 overflow-y: auto/scroll 的容器生效，且 Chrome 82+/Edge 88+ 支持，Firefox 和 Safari 不支持。
overflow-anchor: none 能有效关闭浏览器默认的滚动锚定行为，解决动态内容插入后页面意外跳动的问题——但仅在 Chrome 82+ 和 Edge 88+ 生效，Firefox 和 Safari 当前完全不支持。
什么是 overflow-anchor 滚动锚定？
当页面中插入新 DOM（比如加载更多列表、展开折叠区块），浏览器会尝试“保持当前可见区域的锚点位置不变”，结果常导致视觉跳动：你刚看到第 5 行，插入后突然滚到了第 3 行。这就是 overflow-anchor 默认为 auto 触发的行为。
它不是 JavaScript 控制的，是原生渲染层机制，所以用 scrollTo 或 scrollTop 补救往往滞后或失效。
如何用 CSS 关闭滚动锚定？
只需给触发跳动的容器（通常是 div 类滚动区）设置：
立即学习“前端免费学习笔记（深入）”；
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
.list-container {
overflow-anchor: none;
}
注意：overflow-anchor 必须作用在**有滚动能力的容器上**（即设置了 overflow-y: auto 或 scroll），对 body 或无溢出的元素无效。
- 只影响该容器内部的锚定逻辑，不影响其他区域
- 设为
none后，插入内容时不再尝试“稳定视口位置”，滚动条位置保持原样（scrollTop不变） - 若容器本身没设
height或max-height，且内容未溢出，则overflow-anchor不起作用
为什么加了 overflow-anchor: none 还在跳？
常见原因不是 CSS 写错了，而是触发条件没满足：
- 父容器或祖先元素设置了
overflow-anchor: auto（显式或默认），且它才是实际滚动容器 - 使用了
position: sticky头部 + 动态插入内容，sticky 元素可能干扰锚定计算（此时需同时给 sticky 容器加overflow-anchor: none） - 插入内容后调用了
focus()到某个表单控件，浏览器强制滚动到焦点元素——这和overflow-anchor无关，得用preventScroll: true或el.focus({ preventScroll: true }) - Chrome 旧版本（scrollTop，插入后同步恢复）
兼容性差时的 JS 临时方案
当必须支持 Firefox 或老 Chrome，且不能接受跳动，可用轻量 JS 补位：
const container = document.querySelector('.list-container');
const savedScroll = container.scrollTop;
// 插入新节点前
container.insertBefore(newItem, refNode);
// 立即恢复（注意：必须在重排前执行）
container.scrollTop = savedScroll;
关键点：scrollTop 设置必须在 DOM 插入后、浏览器重排（reflow）发生前完成；如果中间有 getBoundingClientRect() 或读取 offsetHeight 等触发重排的操作，就会失效。
这种手动控制容易漏掉异步插入场景（比如 Promise.then 里插入），而 overflow-anchor: none 是声明式、自动生效的——只要浏览器支持，就比 JS 更可靠。
