在顶部添加元素时保持滚动位置可以在Firefox中使用而不是Chrome

Question

我有一个Meteor app（source code），它有一个条目流，并且不断添加新条目。我试图这样做，以便如果用户向下滚动到特定条目，该条目应保持可见，即使在顶部添加更多条目也不会移动。使用Velocity动画添加和删除条目。

我有made code which does that，但它仅适用于Firefox，而在Chrome中，随着更多条目的推出，它很快就会开始跳转。为什么这样，我怎么能解决它？

Answer 1

我要发布此消息，因为花了我一段时间才弄清楚。对我来说，它与 Scroll Anchoring 功能有关，该功能是 Chrome 56 中的默认设置。

  

overflow-anchor属性使我们可以选择退出滚动锚定，这是一种浏览器功能，旨在使内容加载到用户当前DOM位置上方，而不必在此之后更改用户位置内容已完全加载。 Source

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

body {
  overflow-anchor: none;
}

You can find a demo here, showcasing the difference with and without scroll anchoring.

Answer 2

在顶部插入元素后，需要手动重新滚动到正确的位置：

function insertNewElementAtTop(parent, elem) {
  var scrollTopBeforeInsert = parent.scrollTop;
  parent.insertBefore(elem, eParent.firstChild);
  parent.scrollTop = scrollTopBeforeInsert + elem.offsetHeight;
}