停用Chrome的滚动保留功能

Question

我有一个包含项目列表的页面：

加载更多按钮应该通过ajax加载更多项目并将其附加到保留当前滚动位置的项目容器中。所以在我点击它后，我希望它看起来像这样（绿色项目是新的）：

但实际上Chrome 56会执行一些计算以使页面保持相同状态，我看到的内容如下：

有没有办法阻止Chrome中的智能滚动位置设置？

更新：我只能在父容器（在我的情况下是＆＃39; body＆＃39;显示）中显示：flex＆＃39; property（我用它来实现＆＃39;粘性页脚＆＃39;功能）。

Answer 1

我通过将overflow-anchor: none;添加到滚动容器来解决了类似的问题。

https://wicg.github.io/ScrollAnchoring/

Answer 2

这很简单。在执行AJAX调用之前，将页面的滚动位置保存到变量，然后在调用之后滚动到该变量指示的位置。以下是您在AJAX通话之前应该写的内容：

var scrollpos = window.scrollY;

这是你的AJAX调用之后的代码

window.scrollTo(0,scrollpos)

希望这有效

Answer 3

为什么chrome会进行计算以保留滚动位置？通常页面只会更长，因此滚动位置无论如何都会保持固定。 我假设您删除了按钮，因此无法保留位置，而内容未重新加载。您应该保留dom中的按钮空间，并在插入重新加载的项目时删除保留的空间。

Answer 4

今天看来，该房产被排除在外了吗？添加“ overflow-anchor：无；”时作为div元素上的样式，我得到以下消息：验证（CSS 3.0）：“ overflow-anchor”不是已知的CSS属性名称。