在顶部添加元素时保持滚动位置在 Firefox 中有效，但在 Chrome 中无效

Question

我有一个Meteor 应用程序（源代码），它有一个条目流，并且不断在顶部添加新条目。我试图做到这一点，如果用户向下滚动到特定条目，即使在顶部添加更多条目，该条目也应该保持可见并且不会移动。添加和删​​除条目使用 Velocity 进行动画处理。

我已经编写了执行此操作的代码，但它仅适用于 Firefox，而在 Chrome 中，随着更多条目的出现，它很快开始跳动。为什么会这样，我该如何解决？

Answer 1

我要发布这个，因为我花了一段时间才弄明白。对我来说，它与Chrome 56 中默认引入的滚动锚定功能有关。

该overflow-anchor属性使我们能够选择退出Scroll Anchoring，这是一项浏览器功能，旨在允许内容加载到用户当前 DOM 位置上方，而一旦内容完全加载，无需更改用户位置。来源

您可能想尝试设置overflow-anchor为none, 以选择退出滚动锚定功能：

body {
  overflow-anchor: none;
}

您可以在此处找到一个演示，展示使用和不使用滚动锚定的差异。