CSS overflow-anchor：滚动锚定与内容插入的稳定性

概述 浏览器的滚动锚定会在内容插入/图像加载导致布局变化时尝试保持用户视野中的内容稳定。然而在某些场景（如广告/提示插入、吸顶区域）可能导致意外位置跳动。`overflow-anchor` 可禁用锚定或为容器控制行为。 示例 ```css /* 对不希望参与锚定的元素禁用 */ .ad-slot, .sticky-header { overflow-anchor: none } /* 在容器级控制 */ .scroll-container { overflow-anchor: auto } ``` 工程建议 - 分析场景：对动态插入且不应影响用户视野的模块设置 `overflow-anchor: none`。 - 与布局稳定：配合 `aspect-ratio`/尺寸占位与懒加载，整体降低 CLS。 - 兼容：特性广泛支持；验证不同浏览器表现并调整策略。 参考与验证 - MDN `overflow-anchor` 文档：https://developer.mozilla.org/docs/Web/CSS/overflow-anchor - web.dev 布局稳定与滚动锚定说明：https://web.dev/articles/scroll-anchoring