Vue3 页面切换 / 刷新后恢复滚动位置的实现方案（超精简）

Ticnix2026-03-18 10:31

一、需求背景

在 Vue3 前端项目中，当用户在长列表 / 长内容页面滚动浏览后，切换到其他页面再返回，或刷新当前页面时，滚动条会默认回到顶部，用户需要重新滚动到之前的位置，体验较差。本文将分享一种基于 ref 引用 + 本地存储的方案，实现滚动位置的记忆与恢复。

二、核心实现思路

通过 ref 获取滚动容器的 DOM 元素，精准控制滚动行为；
监听滚动容器的滚动事件，实时记录滚动高度并存储到本地
页面初始化 / 请求数据完成后，通过 nextTick 确保 DOM 渲染完成，从本地存储读取滚动高度并恢复；
页面销毁前统一清理无用的本地存储，避免冗余数据。

三、具体实现方式

template部分

js 复制代码

<div class="content-wrapper" ref="scrollRef">
    //这里写你滚动的内容
    //也就是滚动条滚动的位置
</div>

js部分

定义相关参数

ts 复制代码

// 滚动容器引用
const scrollRef = ref<any | null>(null);
// 记录离开页面时的滚动高度
const scrollHeight = ref(0);
//定义本地储存的滚动条相关高度的名字
const STORAGE_PROJECT_HEIGHT = 'project_height';

在你页面数据请求完成后加上异步执行获取本地储存的实例滚动高度，这样请求完数据后让滚动条自动跳转到上次离开时的滚动位置

ts 复制代码

nextTick(() => {
  if (scrollRef.value) {
    //这里已经封装好了Storage,如果没封装可以用原生的localStorage.setItem(KEY, JSON.stringify(数据))
    const a: number = Storage.get(STORAGE_PROJECT_HEIGHT)?.height
    scrollRef.value.scrollTop = a
  }
})

在离开前一个页面时执行并且把实例滚动高度储存到本地

js 复制代码

onBeforeRouteLeave((to, from, next) => {
  if (scrollRef.value) {
    const scrollDom = scrollRef.value;
    const currentScrollTop = scrollDom.scrollTop;//获取当前滚动高度
    // 仅保存有效数值
    if (!isNaN(currentScrollTop) && currentScrollTop >= 0) {
      scrollHeight.value = currentScrollTop;
      Storage.set(STORAGE_PROJECT_HEIGHT, {
        height: currentScrollTop
      });
    }
  }
  next();
});