javascript - 防止浏览器在 HTML5 History popstate 上滚动

Question

是否可以防止发生 popstate 事件时滚动文档的默认行为？

我们的网站使用 jQuery 动画滚动和 History.js，无论是通过 pushstate 还是 popstate，状态更改都应将用户滚动到页面的不同区域。问题是浏览器会在 popstate 事件发生时自动恢复到之前状态的滚动位置。

我尝试使用一个容器元素设置为文档的 100% 宽度和高度，并滚动该容器内的内容。我发现的问题是它似乎不像滚动文档那样流畅；特别是如果使用大量 css3，例如框阴影和渐变。

我还尝试在用户启动滚动期间存储文档的滚动位置，并在浏览器滚动页面(在 popstate 上)后恢复它。这在 Firefox 12 中运行良好，但在 Chrome 19 中，由于页面正在滚动和恢复而出现闪烁。我认为这与滚动和触发滚动事件(恢复滚动位置)之间的延迟有关。

Firefox 在 popstate 触发之前滚动页面(并触发滚动事件)，而 Chrome 首先触发 popstate 然后滚动文档。

我见过的所有使用历史 API 的网站要么使用与上述类似的解决方案，要么在用户后退/前进时忽略滚动位置变化(例如 GitHub)。

是否有可能完全阻止文档在 popstate 事件中滚动？

Answer 1

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

(2015 年 9 月 2 日 Announced by Google)

浏览器支持:

Chrome:支持(从 46 开始)

Firefox:支持(从 46 开始)

IE:不支持

Edge:支持(从 79 开始)

Opera:支持(从 33 开始)

Safari :支持

有关详细信息，请参阅 Browser compatibility on MDN .