滚动锚定概述
作为一名网页用户，您可能熟悉滚动锚定所解决的问题。您在一个慢速连接上浏览一个很长的页面，并开始滚动阅读内容；当您忙于阅读时，您正在查看的页面部分突然跳动。这是因为大图片或其他一些元素刚加载到内容中更靠上的位置。
滚动锚定是一种浏览器功能，旨在解决内容跳动的问题，当用户已经滚动到文档的新部分之后内容才加载时，就会发生这种问题。
它是如何工作的？
滚动锚定会调整滚动位置，以补偿视口之外的更改。这意味着用户正在查看的文档中的点会保留在视口中，这可能意味着他们的滚动位置实际上会根据他们在文档中移动的“距离”而改变。
如何开启滚动锚定？
您不需要！此功能在支持的浏览器中默认启用。在大多数情况下，锚定滚动正是您想要的——内容跳动对任何人来说都是糟糕的体验。
如果我需要调试它怎么办？
如果您的页面在启用滚动锚定后行为不佳，可能是因为某些 scroll 事件监听器没有处理额外的滚动以补偿锚定节点的移动。
您可以通过在 Firefox 的 about:config 中将 layout.css.scroll-anchoring.enabled 更改为 false 来检查禁用滚动锚定是否解决了问题。您还可以使用 layout.css.scroll-anchoring.highlight 开关检查 Firefox 使用哪个节点作为锚点。这将在锚点节点顶部显示一个紫色覆盖层。
如果某个节点似乎不是一个合适的锚点，您可以使用 overflow-anchor 将其排除，如下所述。
如果我需要禁用它怎么办？
CSS 滚动锚定模块提供了 overflow-anchor 属性，可用于禁用文档全部或部分的滚动锚定。它本质上是一种选择退出此行为的方式。
唯一可能的值是 auto 或 none
auto是初始值；只要用户的浏览器支持滚动锚定，此行为就会发生，并且他们应该会看到更少的内容跳动。none意味着您已明确选择禁用文档或文档部分的滚动锚定。
要禁用整个文档的滚动锚定，您可以在 <body> 元素上设置它
body {
overflow-anchor: none;
}
要禁用文档某一部分的滚动锚定，请在该部分的容器元素上设置 overflow-anchor: none
.container {
overflow-anchor: none;
}
如果禁用文档或文档某一部分的滚动锚定，则禁用区域的后代不能重新启用。例如，如果您禁用整个文档，则不能在后代节点上设置 overflow-anchor: auto 以重新开启该子部分的滚动锚定。
抑制触发器
存在一些“抑制触发器”，它们会在可能出现问题的地方禁用滚动锚定。如果锚点节点或其祖先节点上发生任何触发器，则锚定将被抑制。
这些抑制触发器是以下任何属性的计算值的更改：
规范
| 规范 |
|---|
| CSS 滚动锚定模块级别 1 # 排除 API |
浏览器兼容性
加载中…
要根据是否可以禁用滚动锚定有条件地应用样式，请使用 @supports 功能查询来测试对 overflow-anchor 属性的支持。
另见
- WICG 的原始滚动锚定解释器 (2016)
- Chromium 的面向 Web 开发者的滚动锚定 (2017)