快捷導(dǎo)航

Vue3頁面切換/刷新后恢復(fù)滾動位置的超精簡實現(xiàn)方案

更新時間：2026年03月19日 08:42:52 作者：Ticnix

在 Vue3 前端項目中,當(dāng)用戶在長列表 / 長內(nèi)容頁面滾動瀏覽后,切換到其他頁面再返回,或刷新當(dāng)前頁面時,滾動條會默認(rèn)回到頂部,體驗較差,本文將分享一種基于 ref 引用 + 本地存儲的方案,實現(xiàn)滾動位置的記憶與恢復(fù),需要的朋友可以參考下

一、需求背景

在 Vue3 前端項目中，當(dāng)用戶在長列表 / 長內(nèi)容頁面滾動瀏覽后，切換到其他頁面再返回，或刷新當(dāng)前頁面時，滾動條會默認(rèn)回到頂部，用戶需要重新滾動到之前的位置，體驗較差。本文將分享一種基于 ref 引用 + 本地存儲的方案，實現(xiàn)滾動位置的記憶與恢復(fù)。

二、核心實現(xiàn)思路

通過 ref 獲取滾動容器的 DOM 元素，精準(zhǔn)控制滾動行為；
監(jiān)聽滾動容器的滾動事件，實時記錄滾動高度并存儲到本地
頁面初始化 / 請求數(shù)據(jù)完成后，通過 nextTick 確保 DOM 渲染完成，從本地存儲讀取滾動高度并恢復(fù)；
頁面銷毀前統(tǒng)一清理無用的本地存儲，避免冗余數(shù)據(jù)。

三、具體實現(xiàn)方式

template部分

<div class="content-wrapper" ref="scrollRef">
    //這里寫你滾動的內(nèi)容
    //也就是滾動條滾動的位置
</div>

js部分

定義相關(guān)參數(shù)

// 滾動容器引用
const scrollRef = ref<any | null>(null);
// 記錄離開頁面時的滾動高度
const scrollHeight = ref(0);
//定義本地儲存的滾動條相關(guān)高度的名字
const STORAGE_PROJECT_HEIGHT = 'project_height';

在你頁面數(shù)據(jù)請求完成后加上異步執(zhí)行獲取本地儲存的實例滾動高度，這樣請求完數(shù)據(jù)后讓滾動條自動跳轉(zhuǎn)到上次離開時的滾動位置

nextTick(() => {
  if (scrollRef.value) {
    //這里已經(jīng)封裝好了Storage,如果沒封裝可以用原生的localStorage.setItem(KEY, JSON.stringify(數(shù)據(jù)))
    const a: number = Storage.get(STORAGE_PROJECT_HEIGHT)?.height
    scrollRef.value.scrollTop = a
  }
})

在離開前一個頁面時執(zhí)行并且把實例滾動高度儲存到本地

onBeforeRouteLeave((to, from, next) => {
  if (scrollRef.value) {
    const scrollDom = scrollRef.value;
    const currentScrollTop = scrollDom.scrollTop;//獲取當(dāng)前滾動高度
    // 僅保存有效數(shù)值
    if (!isNaN(currentScrollTop) && currentScrollTop >= 0) {
      scrollHeight.value = currentScrollTop;
      Storage.set(STORAGE_PROJECT_HEIGHT, {
        height: currentScrollTop
      });
    }
  }
  next();
});

到此這篇關(guān)于Vue3頁面切換/刷新后恢復(fù)滾動位置的超精簡實現(xiàn)方案的文章就介紹到這了,更多相關(guān)Vue3頁面刷新恢復(fù)滾動位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: