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初学者不得不了解的就是组件间的数据通信(暂且不谈vuex),通信方式根据组件之间的关系有不同之处,这篇文章主要给大家介绍了关于vue组件间通信的相关资料,需要的朋友可以参考下2021-07-07
这篇文章主要介绍了vue 标签属性数据绑定和拼接的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-05-05
这篇文章主要为大家介绍了Vue组件的Prop命名约定详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
在Vue 3中,可以通过创建一个事件总线（event bus）来实现组件之间的通信,要在Vue 3中使用事件总线,主要步骤有：1、创建一个新的Vue实例作为事件总线,2、在组件中引入并使用该事件总线,以下是详细的步骤和示例,需要的朋友可以参考下2025-01-01
这篇文章主要为大家介绍了Vue3将虚拟节点渲染到网页初次渲染详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-03-03
这篇文章主要介绍了vue使用websocket及封装过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue 前端 el-input 实现输入框内容始终添加在尾部%的方法
在el-input输入框的尾部添加%,可以通过suffix或append插槽实现,suffix插槽简单直接,适用于静态显示%,而append插槽更灵活,适用于显示更复杂的内容,感兴趣的朋友跟随小编一起看看吧2024-12-12
这篇文章主要为大家详细介绍了vue-cropper插件实现图片截取上传组件封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
在Vue3和TypeScript中大文件分片上传的实现与优化
本文介绍在 Vue 3 和 TypeScript 环境下大文件分片上传的实现与优化,包括项目前后端技术栈,前端的文件切片、并发上传、计算 Hash、断点续传和用户体验优化,后端的文件接收存储、切片合并、异常处理与日志记录,还提及遇到的问题及解决方案,总结了此方式的优势和重要性2025-01-01
这篇文章主要介绍了使用vue重构资讯页面的实例代码解析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-11-11
最新评论