overflow-anchor

overflow-anchor 属性使我们能够选择退出滚动锚点，这是一种浏览器功能，旨在允许内容在用户当前 DOM 位置之上加载，而不会在内容完全加载后更改用户的位置。

为什么我们需要它

滚动锚点 是一种浏览器功能，试图防止一种常见情况，即您可能在 DOM 完全加载之前向下滚动网页，并且当它加载时，任何在您当前位置之上加载的元素都会将您推到网页更下方。

为什么会发生这种情况是合理的。 我们应用于元素的 CSS 属性会赋予它们大小（例如 width）、形状（例如 transform）和位置（例如 margin）。 如果这些元素在您向下滚动网页时还没有加载，即使它们在您当前视窗之外，DOM 也会继续加载它们，并且会物理扩展以腾出空间供这些新加载的元素。 当 DOM 增长时，您在网页上的位置会发生变化以适应这些元素。

滚动锚点通过锁定用户在网页上的位置（当 DOM 在当前位置之上发生更改时）来防止这种“跳跃”体验。 这允许用户在网页上保持固定位置，即使 DOM 中加载了新元素。

overflow-anchor 属性使我们能够选择退出滚动锚点功能，以防希望允许内容在加载元素时重新流动。

语法

article {
  overflow-anchor: [auto | none ];
}

值

overflow-anchor 属性接受两个值，它们实质上切换该功能是否启用。

• auto（默认）：在应用了它的网页或元素的部分上启用滚动锚点。
• none：禁用网页部分或全部的滚动锚点，或将 DOM 的部分排除在锚定之外，允许内容重新流动。

您可能将此应用于 body，但可以将其作用域限定为任何选择器，如果该元素滚动，它将生效。

演示

在这个演示中，一旦您在一个框中滚动，它就会在该 div 的顶部添加一堆绿色框。 通常情况下，这会立即将内容向下推，这可能是一种巨大的干扰，并会导致您在文本中的位置丢失。 使用 overflow-anchor: auto;，滚动位置会保留。 overflow-anchor: none; 允许新插入的 div 影响滚动位置。

查看 CodePen 上 Chris Coyier 的 overflow-anchor (@chriscoyier)。

另一个可以做的事情，也是 非常有用 的，就是将元素的滚动位置 固定到底部。 例如，一个聊天应用程序，其中新消息追加到 DOM 底部，并且您希望滚动位置保持在底部，显示所有新消息

查看 CodePen 上 Chris Coyier 的
使用 scroll-anchor 的“保持在底部”滚动 (@chriscoyier)
在 CodePen 上。

浏览器支持

截至撰写本文时，overflow-anchor 尚未成为当前的 W3C 标准，尽管已提供拟议规范的草案报告以供阅读，并且自版本 56 以来已由 Chrome 采用。 Mozilla 正在考虑在 Firefox 中 引入类似的功能。 随着越来越多的浏览器采用滚动锚点功能，我们预计会看到对 overflow-anchor 的更多浏览器支持，因为它提供了明确的控制权以选择退出该功能。

更多信息

• 滚动锚点：滚动锚点规范的拟议草案
• Chromium 博客：宣布 Chrome 在版本 56 中包含滚动锚点和 CSS 属性的博客文章
• Bugzilla 问题单 #43114：在 Firefox 中包含该属性的开放问题单