scrollrestoration = 'manual' 仅禁用浏览器自动滚动恢复，需配合 pageshow 事件、sessionstorage 持久化及 scrollintoview 精准定位来实现可靠还原，尤其注意 bfcache 下 dom 冻结与节点就绪判断。
scrollRestoration 设为 manual 后，页面刷新不再自动滚动到上次位置
默认情况下，浏览器会在前进/后退或刷新时尝试恢复滚动位置，但长列表页面常因 DOM 重绘、懒加载或虚拟滚动导致恢复失败或错位。history.scrollRestoration = 'manual' 是主动接管滚动锚定的第一步——它只是关掉浏览器的自动行为，并不提供任何滚动逻辑。你必须自己监听 pageshow 事件，在页面可见时手动还原 scrollY 或元素偏移。
pageshow 事件里读取并应用保存的 scrollY 值
不能在 load 或 DOMContentLoaded 中还原滚动，因为此时 DOM 可能尚未就绪（尤其含大量图片或异步组件）。pageshow 更可靠，且其 event.persisted 属性能明确区分是缓存加载还是全新加载：
- 若
event.persisted === true，说明页面来自 bfcache，此时window.scrollY仍是旧值，需先清零再跳转 - 保存的 scrollY 应存在
sessionStorage中，每次滚动后 debounce 更新，避免频繁写入 - 还原前检查目标容器是否已渲染（例如等待
document.querySelector('.list-container')存在），否则直接window.scrollTo()可能被后续渲染覆盖
长列表中用 element.scrollIntoView() 替代 window.scrollTo() 更精准
单纯恢复 scrollY 在虚拟滚动或高度动态列表中极易偏移，因为行高可能变化、图片加载后撑开内容。更稳的方式是记录「最后可见项的 key」或「data-index」属性，在 pageshow 时查找对应 DOM 节点并调用 element.scrollIntoView({ block: 'nearest', inline: 'start' })：
- 记录时机：在
scroll事件中，用getBoundingClientRect()判断哪个 item 的 top 在视口内，取最靠近顶部的那个 - 还原时机：确保该 item 已挂载（可用
MutationObserver监听列表容器子节点变化，或简单轮询document.getElementById('item-123')） - 注意
scrollIntoView在 Safari 中对position: sticky容器内行为不一致，建议包裹层设overflow-anchor: auto
兼容性与 bfcache 冲突点必须显式处理
scrollRestoration 在所有现代浏览器中支持，但 bfcache（back/forward cache）会绕过 pageshow 的常规流程，导致 persisted 为 true 时 DOM 状态“冻结”。这时 sessionStorage 里的值可能过期，而 scrollIntoView 又找不到目标节点：
- 在
pagehide事件中同步保存状态，比仅依赖滚动事件更及时 - 对关键长列表组件，添加
onbeforeunload清理无用状态，防止跨页面污染 - Chrome 120+ 默认启用 bfcache，若发现还原失效，可在
pageshow中加if (event.persisted) { location.reload() }强制降级（仅调试用）
真正难的不是写几行 scrollIntoView，而是判断“此刻 DOM 是否可信”——列表数据是服务端直出？还是客户端 fetch 后渲染？有没有骨架屏占位？这些细节决定 scrollRestoration 是锦上添花，还是雪上加霜。
