如何借助 history.scrollRestoration 手动控制长列表页面在刷新后是否需要强制回顶

作者：袖梨 2026-06-30

history.scrollRestoration = 'manual' 用于禁用浏览器在前进/后退和刷新时自动恢复滚动位置，默认为'auto'；设为'manual'后需配合beforeunload和pageshow事件手动调用scrollTo(0,0)确保置顶。

history.scrollRestoration = 'manual' 是什么作用

它告诉浏览器：别自动恢复上次的滚动位置，后续所有滚动行为都由 JS 显式控制。这个设置只影响「前进/后退」和「刷新」两类操作的默认滚动行为，不改变页面内正常滚动逻辑。history.scrollRestoration 默认是 'auto'，设为 'manual' 后，浏览器在 history 导航（比如 history.back()）或刷新时，不再尝试还原 window.scrollY，而是保持在顶部（0, 0）——但注意：这**不是强制置顶**，只是“取消自动恢复”，你仍需自己调用 window.scrollTo(0, 0) 才能确保真正在顶部。

为什么长列表页面刷新后不能只靠 scrollRestoration='manual'

因为 scrollRestoration = 'manual' 只是关掉了浏览器的自动恢复机制，并不等于“每次刷新都滚到顶部”。尤其在以下场景中，用户仍可能看到非预期的滚动位置：

页面首次加载后用户已向下滚动，然后手动刷新（F5 或地址栏回车）——此时若没额外干预，scrollTo(0, 0) 没被触发，页面会从上次记录的 scrollY 开始渲染（尽管 scrollRestoration 是 manual，但该值仅约束 history 导航，不约束刷新初始状态）
某些 iOS Safari 版本对 beforeunload 支持不稳定，导致刷新前没来得及执行 scrollTo(0, 0)
使用 location.reload() 编程式刷新时，beforeunload 不一定触发（尤其在无用户交互上下文中）

必须搭配 beforeunload + pageshow 才可靠

真正防住刷新后错位，得靠两个事件组合：

beforeunload：在页面卸载前立即置顶，视觉无跳动。用 addEventListener('beforeunload', () => window.scrollTo(0, 0))，不要用 onbeforeunload = ...（易被覆盖）
pageshow：捕获浏览器缓存恢复场景（如 iOS 后退、Android 被系统回收后重建），当 e.persisted === true 时再执行一次 window.scrollTo(0, 0)
二者缺一不可：beforeunload 拦不住缓存页恢复，pageshow 拦不住普通刷新

示例代码：

if ('scrollRestoration' in window.history) {  window.history.scrollRestoration = 'manual';}window.addEventListener('beforeunload', () => {  window.scrollTo(0, 0);});window.addEventListener('pageshow', (e) => {  if (e.persisted) {    window.scrollTo(0, 0);  }});

虚拟列表场景下特别注意 body 溢出控制

如果你用的是 react-window 或 vue-virtual-scroller 这类虚拟滚动方案，常伴随 body { overflow: hidden } 或 overflow-y: hidden 的布局 hack。这种情况下，即使 scrollRestoration = 'manual'，刷新后浏览器仍可能把旧的 scrollY 值强行应用到一个“不可滚动”的 body 上，造成内容截断、顶部留白或底部消失等视觉异常。

务必确保 beforeunload 中的 scrollTo(0, 0) 在 DOM 卸载前执行，而不是依赖 DOMContentLoaded 或 load（它们太晚，用户能看到跳变）
避免在 useEffect 或 mounted 钩子中做置顶——那是在新页面渲染完成后才执行，必然有闪动
如果用了 position: fixed + top: 0 的全屏容器，检查是否意外继承了父级 transform 或 will-change，这些可能干扰滚动坐标计算