使用 History API 管理网址真的很棒,而且它已成为优质 Web 应用的一项重要功能。不过,它的缺点之一是,系统会存储滚动位置,而更重要的是,每当您遍历历史记录时,该位置都会恢复。这通常意味着,当滚动位置自动更改时,会有不美观的跳跃,尤其是当应用的转换或以任何方式更改页面内容时更是如此。最终会导致糟糕的用户体验。
更糟糕的是,您能做的事也很少:Chrome 在 scroll
事件之前触发 popState
事件,这意味着您可以读取 popState
中的当前滚动位置,然后在 scroll
事件处理脚本中使用 window.scrollTo
反转该位置(真糟糕,至少它有效!)。但是,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
,请告知他们。