🐛 [doc] reset scrollBar after switching page route (#72)

fix #71
shuimo-design · Feb 23, 2024 · 0ee1227 · 0ee1227
1 parent f233011
commit 0ee1227
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
diff --git a/doc/compositions/entry/useResetScroll.ts b/doc/compositions/entry/useResetScroll.ts
@@ -0,0 +1,7 @@
+export function useResetScroll(domRef: Ref<HTMLElement | null>) {
+  const route = useRoute();
+  watch(() => route.path, async () => {
+    await nextTick();
+    domRef.value?.scroll(0, 0);
+  });
+}
diff --git a/doc/pages/docs.vue b/doc/pages/docs.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="docs menu-right m-scroll">
+  <div class="docs menu-right m-scroll" ref="contentRef">
     <NuxtPage/>
   </div>
 </template>
@@ -13,8 +13,10 @@
  *
  * 公司的业务千篇一律，复杂的代码好几百行。
  */
+import { useResetScroll } from '@/compositions/entry/useResetScroll';
 
-
+const contentRef = ref<HTMLDivElement | null>(null);
+useResetScroll(contentRef);
 </script>
 
 <style scoped>

diff --git a/doc/pages/main.vue b/doc/pages/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="home menu-right m-scroll">
+  <div class="home menu-right m-scroll" ref="contentRef">
     <NuxtPage/>
   </div>
 </template>
@@ -13,7 +13,10 @@
  *
  * 公司的业务千篇一律，复杂的代码好几百行。
  */
+import { useResetScroll } from '@/compositions/entry/useResetScroll';
 
+const contentRef = ref<HTMLDivElement | null>(null);
+useResetScroll(contentRef);
 </script>
 
 <style scoped>