History API - 滚动恢复

Paul Lewis

使用 History API 管理网址非常棒,而且恰好也是优质 Web 应用的一项关键功能。不过,它的一个缺点是,系统会存储滚动位置,并且更重要的是,每当您浏览历史记录时,都会恢复这些位置。这通常意味着滚动位置自动更改时会出现不雅的跳动,尤其是当您的应用执行转换或以任何方式更改页面内容时。最终会导致糟糕的用户体验。

更糟糕的是,您对此几乎束手无策:Chrome 会在 scroll 事件之前触发 popState 事件,这意味着您可以在 popState 中读取当前滚动位置,然后使用 window.scrollToscroll 事件处理脚本中将其反转(很糟糕,但至少能正常运行!)。不过,Firefox 会在 popState 之前触发 scroll 事件,因此您无法得知旧滚动值,无法将其恢复。呸!

不过,好消息是,我们可能找到了解决方法:history.scrollRestoration。它接受两个字符串值:auto(保持一切不变,也是默认值)和 manual(表示您作为开发者将拥有用户浏览应用历史记录时可能需要的所有滚动更改的所有权)。如果需要,您可以在使用 history.pushState() 推送历史记录条目时跟踪滚动位置。

此功能是新推出的实验性功能(虽然非常棒),因此请务必先检查是否可用,然后再使用:

if ('scrollRestoration' in history) {
    // Back off, browser, I got this...
    history.scrollRestoration = 'manual';
}

您可以在 Chrome 46 及更高版本中找到 history.scrollRestoration,并点击此处查看其规范

别忘了向我们提供反馈,如果您希望其他供应商也支持 scrollRestoration,请告知他们。