scrollrestoration = "manual" 是必要前提，它禁用浏览器自动滚动，使开发者能按路由维度存储/恢复滚动位置，并在dom稳定后精准还原，尤其需针对长列表处理空滚动与跳变问题。
直接设置 history.scrollRestoration = "manual" 并不能自动记住滚动位置，它只是把控制权交给你——真正的“精准还原”依赖你主动捕获、存储和恢复滚动状态，尤其在长列表（如无限滚动、虚拟滚动）场景下，需绕过浏览器默认行为并精细管理。
为什么 scrollRestoration = "manual" 是必要前提
默认情况下，浏览器会在前进/后退时自动滚动到上次离开页面时的位置（auto 模式），但这个位置常不准确：它基于整个文档的 scrollTop，而单页应用中页面内容动态替换，DOM 重绘后元素高度可能变化，导致恢复位置错位。设为 "manual" 后，浏览器不再干预，你可结合路由变化时机，在 DOM 稳定后手动执行滚动，从而获得完全可控的时机和目标。
关键：按路由维度存储滚动偏移，而非全局
长列表往往对应不同路由（如 /list?category=tech 和 /list?category=design），每组数据独立分页、加载逻辑不同。必须将滚动位置与具体路由状态绑定：
- 监听
popstate或路由库的导航事件（如 React Router 的useNavigation、Vue Router 的beforeEach） - 在离开当前路由前，用
history.state或独立 Map 缓存当前路径 + 滚动值：scrollMap.set(currentPath, document.documentElement.scrollTop || document.body.scrollTop) - 进入新路由时，先阻止默认滚动，等列表 DOM 渲染完成（可用
requestAnimationFrame或setTimeout(..., 0)），再读取对应路径的缓存值并调用window.scrollTo(0, y)
长列表的特殊处理：避免“空滚动”和“跳变”
虚拟滚动或懒加载列表首次渲染时，真实 DOM 高度远小于最终高度，若立即滚动，目标位置可能尚未存在。需等待数据就绪且可视区域稳定：
- 对 React，可在
useEffect中监听列表数据长度和isLoaded状态，确认首屏元素已挂载后再滚动 - 对 Vue，使用
nextTick()+ref获取容器高度，对比预期滚动值是否超出当前可滚动范围；若超出，说明内容未加载完，延迟重试 - 更稳妥的做法：记录的不是绝对
scrollTop，而是“第 N 条数据 + 偏移像素”，恢复时先定位到该条目（element.offsetTop），再叠加偏移
补充：兼容性与降级策略
scrollRestoration 在 Safari 15.4+ 和所有现代 Chrome/Firefox 中支持良好，但旧版 Safari 不支持。检测方式：
if ('scrollRestoration' in history) { history.scrollRestoration = 'manual'; }
不支持时，可退回到监听 pageshow 事件（带 event.persisted === true 表示来自缓存），此时仍可尝试读取本地缓存的滚动值并 scrollTo，虽不如 manual 精准，但比完全丢失体验好。
