History API - 滚动恢复
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
使用 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
,请告知他们。
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2015-09-01。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2015-09-01\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2015-09-01。"],[],[]]