history.scrollRestoration默认为"auto",设为"manual"可禁用浏览器自动滚动恢复,需手动通过sessionStorage保存/恢复scrollY;仅支持Chrome46+等现代浏览器,SPA中需结合路由钩子处理。

history.scrollRestoration 是浏览器提供的一个 API,用于控制页面在前进/后退或刷新时是否自动恢复滚动位置。默认值为 "auto",即由浏览器决定(现代浏览器通常会恢复)。若设为 "manual",则禁用自动恢复,需开发者手动处理滚动逻辑。
设置 scrollRestoration 为 manual
该属性是只读的,但可在页面加载早期(如 中的脚本或 DOMContentLoaded 前)尝试修改:
- 必须在首次导航完成前设置(例如在
beforeunload或页面初始 JS 中); - 多数浏览器仅允许在顶层文档中设置,iframe 内无效;
- 设置后无法再改回
"auto"(部分浏览器会静默失败)。
典型写法:
if ('scrollRestoration' in history) {
history.scrollRestoration = 'manual';
}
手动保存和恢复滚动位置
设为 "manual" 后,需自行在合适时机记录并应用滚动偏移:
- 使用
scrollY(或window.pageYOffset)获取垂直滚动位置; - 在
beforeunload或用户离开前存入sessionStorage; - 在
DOMContentLoaded或load后读取并调用window.scrollTo()。
示例:
// 保存
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('scrollY', window.scrollY.toString());
});
// 恢复(注意:避免在 DOM 尚未就绪时执行)
window.addEventListener('DOMContentLoaded', () => {
const saved = sessionStorage.getItem('scrollY');
if (saved && parseInt(saved, 10) > 0) {
window.scrollTo(0, parseInt(saved, 10));
}
});
注意兼容性与边界情况
该 API 在 Chrome 46+、Firefox 46+、Edge 79+、Safari 15.4+ 支持,但行为细节有差异:
- Safari 对
beforeunload支持较弱,建议改用pagehide保存; - 刷新时若 DOM 渲染慢于
scrollTo,可能被浏览器覆盖,可加setTimeout(..., 0)延迟; - 单页应用(SPA)中,路由切换不触发刷新,此设置不影响路由内的滚动行为,应配合路由钩子(如 Vue Router 的
scrollBehavior或 React Router 的useScrollRestoration)。
替代方案:不设 manual,仅干预特定场景
若只需禁用刷新恢复,而保留前进/后退恢复,可不设 scrollRestoration,改用更细粒度控制:
- 监听
pageshow事件,检查event.persisted(表示来自缓存,即 bfcache 或刷新恢复); - 若为刷新恢复且不想滚动,直接
window.scrollTo(0, 0); - 这样无需修改
scrollRestoration,兼容性更好,也更灵活。
示例:
window.addEventListener('pageshow', (e) => {
if (e.persisted) {
window.scrollTo(0, 0);
}
});

















