fix: 修复滚动位置

sub-store-org · Jan 18, 2024 · 7dba76b · 7dba76b
1 parent 69a2d06
commit 7dba76b
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.77",
+  "version": "2.14.78",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/components/FileListItem.vue b/src/components/FileListItem.vue
@@ -183,7 +183,7 @@
   import { computed, createVNode, ref, toRaw } from 'vue';
   import useV3Clipboard from 'vue-clipboard3';
   import { useI18n } from 'vue-i18n';
-  import { useRouter } from 'vue-router';
+  import { useRouter, useRoute } from 'vue-router';
   import { useHostAPI } from '@/hooks/useHostAPI';
 
   const { copy, isSupported } = useClipboard();
@@ -209,6 +209,7 @@
   const swipeIsOpen = ref(false);
   const compareData = ref();
   const router = useRouter();
+  const route = useRoute();
   const globalStore = useGlobalStore();
   const subsStore = useSubsStore();
   const subsApi = useSubsApi();
@@ -276,6 +277,8 @@
 
       scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 
+      globalStore.setSavedPositions(route.path, { left: 0, top: scrollTop })
+
       document.querySelector('html').style['overflow-y'] = 'hidden';
       document.querySelector('html').style.height = '100%';
       document.body.style.height = '100%';

diff --git a/src/components/SubListItem.vue b/src/components/SubListItem.vue
@@ -208,7 +208,7 @@
   import { computed, createVNode, ref, toRaw } from 'vue';
   import useV3Clipboard from 'vue-clipboard3';
   import { useI18n } from 'vue-i18n';
-  import { useRouter } from 'vue-router';
+  import { useRouter, useRoute } from 'vue-router';
   import { useHostAPI } from '@/hooks/useHostAPI';
 
   const { copy, isSupported } = useClipboard();
@@ -234,6 +234,7 @@
   const swipeIsOpen = ref(false);
   const compareData = ref();
   const router = useRouter();
+  const route = useRoute();
   const globalStore = useGlobalStore();
   const subsStore = useSubsStore();
   const subsApi = useSubsApi();
@@ -356,6 +357,8 @@
 
       scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 
+      globalStore.setSavedPositions(route.path, { left: 0, top: scrollTop })
+
       document.querySelector('html').style['overflow-y'] = 'hidden';
       document.querySelector('html').style.height = '100%';
       document.body.style.height = '100%';

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -39,23 +39,31 @@ declare module 'vue-router' {
 const history = createWebHistory();
 const router = createRouter({
   scrollBehavior(to, from, savedPosition) {
+    // console.log(`scrollBehavior ${from.path} => ${to.path}`)
+    document.querySelector('html').style['overflow-y'] = '';
+    document.querySelector('html').style.height = '';
+    document.body.style.height = '';
+    document.body.style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style.height = '';
+
     if (to.hash) {
       return {
         el: to.hash,
         behavior: 'smooth',
       }
     }
+    if (globalStore !== null) {
+      const savedPositions = toRaw(globalStore.savedPositions);
+      if (savedPositions[to.path]) {
+        // console.log(`读取到 ${to.path} 保存的滚动位置：${savedPositions[to.path]?.top}`)
+        return savedPositions[to.path]
+      }
+    }
     if (savedPosition) {
       // console.log(`接受到 ${to.path} savedPosition 滚动位置：${savedPosition?.top}`)
       return savedPosition
     } else {
-      if (globalStore !== null && to?.meta?.needTabBar) {
-        const savedPositions = toRaw(globalStore.savedPositions);
-        if (savedPositions[to.path]) {
-          // console.log(`读取到 ${to.path} 保存的滚动位置：${savedPositions[to.path]?.top}`)
-          return savedPositions[to.path]
-        }
-      }
       return { top: 0, left: 0 }
     }
   },
@@ -189,7 +197,9 @@ const router = createRouter({
 //   return true;
 // });
 router.beforeEach((to, from) => {
-  if (from?.meta?.needTabBar) {
+  // console.log(`beforeEach ${from.path} => ${to.path}`)
+  if (from?.meta?.needTabBar && from?.path !== to?.path) {
+  // if (from?.meta?.needTabBar) {
     const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
     // console.log(`保存 ${from.path} 滚动位置：${scrollTop}`)
     globalStore.setSavedPositions(from.path, { left: 0, top: scrollTop })

diff --git a/src/views/FileEditor.vue b/src/views/FileEditor.vue
@@ -361,6 +361,8 @@
 
         scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 
+        globalStore.setSavedPositions(route.path, { left: 0, top: scrollTop })
+
         document.querySelector('html').style['overflow-y'] = 'hidden';
         document.querySelector('html').style.height = '100%';
         document.body.style.height = '100%';

diff --git a/src/views/SubEditor.vue b/src/views/SubEditor.vue
@@ -470,6 +470,8 @@
 
         scrollTop = document.documentElement.scrollTop || document.body.scrollTop
 
+        globalStore.setSavedPositions(route.path, { left: 0, top: scrollTop })
+
         document.querySelector('html').style['overflow-y'] = 'hidden';
         document.querySelector('html').style.height = '100%';
         document.body.style.height = '100%';