如何在数据动态加载页面跳转返回后恢复原有滚动条位置

问题根因：浏览器默认的滚动恢复逻辑触发时机早于动态数据加载、DOM渲染完成的时间，初始页面高度不足导致滚动到错误位置，数据加载完成后也不会重新触发滚动恢复。

通用原生JS解决方案 #

• 手动存储滚动位置：监听页面跳转前的beforeunload事件，或者路由跳转前置钩子，将当前滚动高度存入sessionStorage或者history state中：

// 存入history state的方式，不会占用本地存储
window.addEventListener('beforeunload', () => {
  history.replaceState(
    { ...history.state, scrollTop: window.scrollY },
    document.title
  )
})

• 页面回退后等待动态数据完全加载、DOM渲染完成后，读取存储的滚动高度执行恢复：

// 仅当页面是通过后退进入、且存储了滚动高度时执行恢复
if (history.state?.scrollTop) {
  // 确保DOM渲染完成，可根据实际场景替换为数据加载完成的回调
  requestAnimationFrame(() => {
    window.scrollTo(0, history.state.scrollTop)
    // 恢复完成后清除存储的滚动高度，避免首次进入误触发
    history.replaceState({ ...history.state, scrollTop: null }, document.title)
  })
}

• 可选：关闭浏览器默认的自动滚动恢复，避免逻辑冲突：

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual'
}

单页应用框架适配方案 #

• Vue项目：结合vue-router的scrollBehavior钩子，配合<keep-alive>缓存页面组件，在组件的onMounted或者数据请求完成的回调中触发滚动恢复
• React项目：使用react-router提供的useScrollRestoration钩子，或者在useEffect中监听数据加载完成状态后执行滚动恢复
  如果是服务端渲染（SSR）场景，需要等待客户端注水完成后再执行滚动恢复逻辑，避免 hydration 异常

注意事项 #

• 如果页面内容是分页/懒加载生成的，需要同时存储离开页面时已加载的数据量/分页页码，回退后先加载对应数量的数据，确保页面高度和离开时一致后再执行滚动恢复
• 不要在数据未加载完成、DOM未渲染完成时提前执行scrollTo，会因为高度不足导致恢复失效

内容的提问来源于stack exchange，提问作者moha