History API - 滚动恢复

Paul Lewis

使用 History API 管理网址非常棒,并且这是优秀 Web 应用的一项重要功能。不过,它的缺点之一是,系统会存储滚动位置,然后(更重要的是,系统会在您遍历历史记录时)恢复滚动位置。这通常意味着,当滚动位置自动更改时会出现不美观的跳跃,尤其是当应用转换或以任何方式更改页面内容时更是如此。最终导致了糟糕的用户体验。

更糟糕的是,您几乎无法对此执行任何操作:Chrome 会在 scroll 事件之前触发 popState 事件,这意味着您可以先读取 popState 中的当前滚动位置,然后使用 window.scrollToscroll 事件处理脚本中反转该位置(Ewww,但至少可以正常运行!)。但是,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,请告知他们。