From 9094b21cbba9cd77a9be2b2df63398c5fc1c97e6 Mon Sep 17 00:00:00 2001
From: Soybean <soybeanjs@outlook.com>
Date: Tue, 11 Jun 2024 19:04:07 +0800
Subject: [PATCH] feat(projects): reset scroll position when tab change

---
 src/layouts/modules/global-content/index.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/layouts/modules/global-content/index.vue b/src/layouts/modules/global-content/index.vue
index ff8ded61..2e7a05b2 100644
--- a/src/layouts/modules/global-content/index.vue
+++ b/src/layouts/modules/global-content/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
+import { LAYOUT_SCROLL_EL_ID } from '@sa/materials';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
 import { useRouteStore } from '@/store/modules/route';
@@ -24,6 +25,12 @@ const routeStore = useRouteStore();
 const tabStore = useTabStore();
 
 const transitionName = computed(() => (themeStore.page.animate ? themeStore.page.animateMode : ''));
+
+function resetScroll() {
+  const el = document.querySelector(`#${LAYOUT_SCROLL_EL_ID}`);
+
+  el?.scrollTo({ left: 0, top: 0 });
+}
 </script>
 
 <template>
@@ -32,6 +39,7 @@ const transitionName = computed(() => (themeStore.page.animate ? themeStore.page
       :name="transitionName"
       mode="out-in"
       @before-leave="appStore.setContentXScrollable(true)"
+      @after-leave="resetScroll"
       @after-enter="appStore.setContentXScrollable(false)"
     >
       <KeepAlive :include="routeStore.cacheRoutes">