Vue3页面切换/刷新后恢复滚动位置的超精简实现方案
更新时间：2026年03月19日 08:42:52 作者：Ticnix
在 Vue3 前端项目中,当用户在长列表 / 长内容页面滚动浏览后,切换到其他页面再返回,或刷新当前页面时,滚动条会默认回到顶部,体验较差,本文将分享一种基于 ref 引用 + 本地存储的方案,实现滚动位置的记忆与恢复,需要的朋友可以参考下
一、需求背景
在 Vue3 前端项目中，当用户在长列表 / 长内容页面滚动浏览后，切换到其他页面再返回，或刷新当前页面时，滚动条会默认回到顶部，用户需要重新滚动到之前的位置，体验较差。本文将分享一种基于 ref 引用 + 本地存储的方案，实现滚动位置的记忆与恢复。
二、核心实现思路
- 通过
ref获取滚动容器的 DOM 元素，精准控制滚动行为； - 监听滚动容器的滚动事件，实时记录滚动高度并存储到本地
- 页面初始化 / 请求数据完成后，通过
nextTick确保 DOM 渲染完成，从本地存储读取滚动高度并恢复； - 页面销毁前统一清理无用的本地存储，避免冗余数据。
三、具体实现方式
template部分
<div class="content-wrapper" ref="scrollRef">
//这里写你滚动的内容
//也就是滚动条滚动的位置
</div>js部分
定义相关参数
// 滚动容器引用 const scrollRef = ref<any | null>(null); // 记录离开页面时的滚动高度 const scrollHeight = ref(0); //定义本地储存的滚动条相关高度的名字 const STORAGE_PROJECT_HEIGHT = 'project_height';
在你页面数据请求完成后加上异步执行获取本地储存的实例滚动高度，这样请求完数据后让滚动条自动跳转到上次离开时的滚动位置
nextTick(() => {
if (scrollRef.value) {
//这里已经封装好了Storage,如果没封装可以用原生的localStorage.setItem(KEY, JSON.stringify(数据))
const a: number = Storage.get(STORAGE_PROJECT_HEIGHT)?.height
scrollRef.value.scrollTop = a
}
})
在离开前一个页面时执行并且把实例滚动高度储存到本地
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();
});
到此这篇关于Vue3页面切换/刷新后恢复滚动位置的超精简实现方案的文章就介绍到这了,更多相关Vue3页面刷新恢复滚动位置内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
安装vue-cli的前提是你已经安装了npm，安装npm你可以直接下载node的安装包进行安装。接下来通过本文给大家介绍安装vue-cli的简易过程，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要为大家详细介绍了vue实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本篇文章主要介绍了Vue中的v-cloak使用解读，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-03-03
在Vue中,过滤器不仅可以处理简单的文本格式化,还可以接受参数以实现更复杂的功能,本文将介绍如何在Vue中使用过滤器参数,感兴趣的小伙伴可以了解下2025-05-05
这篇文章主要介绍了vue关于重置表单数据出现undefined的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
在使用Vue3时,有时页面修改后会出现空白,这篇文章主要介绍了vue3切换路由时页面空白问题解决办法,文中介绍的步骤可以有效解决页面空白问题,需要的朋友可以参考下2024-09-09
Dialog通常是指在Vue.js 3.x版本中使用的对话框组件,它是一个轻量级、易集成的弹窗插件,用于创建通知、确认消息、输入表单等交互场景,最近项目中遇到了全局挂载Dialog的需求,所以本文给大家介绍了Vue3全局挂载Dialog组件的方法,需要的朋友可以参考下2024-12-12
这篇文章主要介绍了通过Vue和elementUI实现树形结构表格与懒加载，文中的示例代码讲解详细，感兴趣的小伙伴快来跟随小编一起学习一下吧2022-01-01
今天小编就为大家分享一篇vue.js的状态管理vuex中store的使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论