禁用 Chrome 的滚动保留功能答案

【问题标题】：Disable Chrome's scroll preserving feature禁用 Chrome 的滚动保留功能
【发布时间】：2017-02-13 13:39:44
【问题描述】：

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

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

但实际上 Chrome 56 执行了一些计算让页面保持不变，而我看到的看起来是这样的：

有什么方法可以阻止 Chrome 中的这种智能滚动位置设置？

更新：只有当父容器（在我的例子中是“body”）具有“display: flex”属性时，我才能重现该行为（我使用它来实现“sticky footer”功能）。

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

今天好像排除了这个属性？添加“溢出锚：无；”时作为 div 元素的样式，我收到消息：Validation (CSS 3.0): "overflow-anchor" is not a known css property name。

【讨论】：

【解决方案3】：

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

var scrollpos = window.scrollY;

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

window.scrollTo(0,scrollpos)

希望这可行

【讨论】：

【解决方案4】：

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

【讨论】：