滚动锚定指南

作为 Web 用户，您可能熟悉滚动锚定解决的问题。您在缓慢的连接上浏览到一个长页面并开始滚动阅读内容；当您忙于阅读时，您正在查看的页面部分突然跳动。发生这种情况是因为大型图像或某些其他元素刚刚在内容的更上方加载。

滚动锚定是浏览器的一项功能，旨在解决内容跳动的问题，如果内容在用户已滚动到文档的新部分后加载，就会发生这种情况。

它是如何工作的？

滚动锚定调整滚动位置以补偿视口外部的变化。这意味着用户正在查看的文档中的点保留在视口中，这可能意味着他们的滚动位置实际上在他们已浏览文档的距离方面发生了变化。

您不需要！此功能在支持的浏览器中默认启用。在大多数情况下，锚定滚动正是您想要的——内容跳动对任何人都来说都是糟糕的体验。

如果您的页面在启用滚动锚定后行为异常，可能是因为某些scroll事件侦听器没有很好地处理额外的滚动以补偿锚节点的移动。

您可以通过在 Firefox 中将layout.css.scroll-anchoring.enabled更改为false（在about:config中）来检查禁用滚动锚定是否可以解决此问题。

如果可以，您可以使用layout.css.scroll-anchoring.highlight开关检查 Firefox 使用哪个节点作为锚点。这将在锚节点顶部显示一个紫色覆盖层。

如果一个节点似乎不适合作为锚点，您可以使用overflow-anchor将其排除，如下所述。

规范提供了一个新属性，overflow-anchor，可用于禁用文档全部或部分的滚动锚定。这实质上是一种选择退出新行为的方式。

唯一可能的值是auto或none

要选择退出整个文档，您可以在<body>元素上设置它

css

body {
  overflow-anchor: none;
}

要选择退出文档的某个特定部分，请在其容器元素上使用overflow-anchor: none

css

.container {
  overflow-anchor: none;
}

注意：规范详细说明，一旦选择退出滚动锚定，您就无法从子元素中重新选择加入。例如，如果您选择退出整个文档，则将无法在文档的其他位置设置overflow-anchor: auto以将其重新打开以用于某个子部分。

规范中还详细说明了一些抑制触发器，这些触发器将在可能存在问题的某些地方禁用滚动锚定。如果任何触发器发生在锚节点或其祖先节点上，则会抑制锚定。

这些抑制触发器是对以下任何属性的计算值的更改

此外，在滚动框内的任何位置更改position也会禁用滚动锚定。

注意：在Firefox bug 1584285中，添加了layout.css.scroll-anchoring.suppressions.enabled标志到 Firefox Nightly，以便允许禁用这些触发器。