docs: use el-scrollbar (#8654)

docs/.vitepress/vitepress/components/vp-app.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { onMounted, ref } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import nprogress from 'nprogress'
 import dayjs from 'dayjs'
@@ -35,6 +35,15 @@ useToggleWidgets(isSidebarOpen, () => {
 
 const userPrefer = useStorage<boolean | string>(USER_PREFER_GITHUB_PAGE, null)
 
+const scrollRef = ref<Element>()
+
+const handleSidebarClick = () => {
+  toggleSidebar(false)
+  if (scrollRef.value) {
+    scrollRef.value?.scrollTo({ top: 0 })
+  }
+}
+
 onMounted(async () => {
   if (!isClient) return
   window.addEventListener(
@@ -106,7 +115,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="App">
+  <el-scrollbar ref="scrollRef" height="100vh" class="App">
     <VPOverlay
       class="overlay"
       :show="isSidebarOpen"
@@ -114,7 +123,7 @@ onMounted(async () => {
     />
     <VPNav />
     <VPSubNav v-if="hasSidebar" @open-menu="toggleSidebar(true)" />
-    <VPSidebar :open="isSidebarOpen" @close="toggleSidebar(false)">
+    <VPSidebar :open="isSidebarOpen" @close="handleSidebarClick">
       <template #top>
         <VPSponsors />
       </template>
@@ -140,5 +149,5 @@ onMounted(async () => {
       </template>
     </VPContent>
     <Debug />
-  </div>
+  </el-scrollbar>
 </template>

docs/.vitepress/vitepress/components/vp-sidebar.vue

@@ -11,21 +11,27 @@ const { sidebars, hasSidebar } = useSidebar()
 </script>
 
 <template>
-  <aside v-if="hasSidebar" :class="{ sidebar: true, open }">
-    <slot name="top" />
-    <div class="sidebar-groups">
-      <section v-for="(item, key) of sidebars" :key="key" class="sidebar-group">
-        <p class="sidebar-group__title">
-          {{ item.text }}
-        </p>
-        <VPSidebarLink
-          v-for="(child, childKey) in item.children"
-          :key="childKey"
-          :item="child"
-          @close="$emit('close')"
-        />
-      </section>
-    </div>
-    <slot name="bottom" />
-  </aside>
+  <el-scrollbar v-if="hasSidebar" :class="{ sidebar: true, open }">
+    <aside>
+      <slot name="top" />
+      <div class="sidebar-groups">
+        <section
+          v-for="(item, key) of sidebars"
+          :key="key"
+          class="sidebar-group"
+        >
+          <p class="sidebar-group__title">
+            {{ item.text }}
+          </p>
+          <VPSidebarLink
+            v-for="(child, childKey) in item.children"
+            :key="childKey"
+            :item="child"
+            @close="$emit('close')"
+          />
+        </section>
+      </div>
+      <slot name="bottom" />
+    </aside>
+  </el-scrollbar>
 </template>

docs/.vitepress/vitepress/styles/base.scss

@@ -32,6 +32,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   transition: background-color var(--el-transition-duration-fast);
+  overflow: hidden;
 }
 
 main {