History API - 滚动恢复

Paul Lewis

使用 History API 管理网址真的很棒,而且它已成为优质 Web 应用的一项重要功能。不过,它的缺点之一是,系统会存储滚动位置,而更重要的是,每当您遍历历史记录时,该位置都会恢复。这通常意味着,当滚动位置自动更改时,会有不美观的跳跃,尤其是当应用的转换或以任何方式更改页面内容时更是如此。最终会导致糟糕的用户体验。

更糟糕的是,您能做的事也很少:Chrome 在 scroll 事件之前触发 popState 事件,这意味着您可以读取 popState 中的当前滚动位置,然后在 scroll 事件处理脚本中使用 window.scrollTo 反转该位置(真糟糕,至少它有效!)。但是,Firefox 会在 popState 之前触发 scroll 事件,因此您不知道为了恢复滚动值而使用了之前的滚动值。啊!

不过,好消息是有一种可能的解决方法:history.scrollRestoration。它需要两个字符串值:automanual,前者会保持当前状态,并且是其默认值;后者意味着,作为开发者,您将掌控用户遍历应用的历史记录时可能需要的所有滚动更改。如果需要,您可以在使用 history.pushState() 推送历史记录条目时跟踪滚动位置。

该功能是新的实验性功能(尽管非常出色),因此在使用之前务必检查其可用情况:

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

您可在 Chrome 46 及更高版本中找到 history.scrollRestoration,您可在此处找到其规范

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