docs: body cancel el-scrollbar (#9015)

* docs: body cancel el-scrollbar

* docs: dark mode scorll bg-color

* style: move scroll css

docs/.vitepress/vitepress/components/doc-content/vp-table-of-content.vue

@@ -13,12 +13,7 @@ import SponsorRightLogoSmallList from '../sponsors/right-logo-small-list.vue'
 const headers = useToc()
 const marker = ref()
 const container = ref()
-const useActiveSidebarLinksResult = useActiveSidebarLinks(container, marker)
-
-const manualLink = (hash: string) => {
-  useActiveSidebarLinksResult && useActiveSidebarLinksResult.manualLink(hash)
-}
-
+useActiveSidebarLinks(container, marker)
 const lang = useLang()
 const sponsor = computed(() => sponsorLocale[lang.value])
 </script>
@@ -33,26 +28,16 @@ const sponsor = computed(() => sponsorLocale[lang.value])
           :key="link"
           class="toc-item"
         >
-          <a
-            class="toc-link"
-            :href="link"
-            :title="text"
-            @click="manualLink(link)"
-            >{{ text }}</a
-          >
+          <a class="toc-link" :href="link" :title="text">{{ text }}</a>
           <ul v-if="children">
             <li
               v-for="{ link: childLink, text: childText } in children"
               :key="childLink"
               class="toc-item"
             >
-              <a
-                class="toc-link subitem"
-                :href="childLink"
-                :title="text"
-                @click="manualLink(childLink)"
-                >{{ childText }}</a
-              >
+              <a class="toc-link subitem" :href="childLink" :title="text">{{
+                childText
+              }}</a>
             </li>
           </ul>
         </li>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted } from 'vue'
 import { ElMessageBox } from 'element-plus'
 import nprogress from 'nprogress'
 import dayjs from 'dayjs'
@@ -35,15 +35,6 @@ 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(
@@ -115,7 +106,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <el-scrollbar ref="scrollRef" height="100vh" class="App">
+  <div class="App">
     <VPOverlay
       class="overlay"
       :show="isSidebarOpen"
@@ -123,7 +114,7 @@ onMounted(async () => {
     />
     <VPNav />
     <VPSubNav v-if="hasSidebar" @open-menu="toggleSidebar(true)" />
-    <VPSidebar :open="isSidebarOpen" @close="handleSidebarClick">
+    <VPSidebar :open="isSidebarOpen" @close="toggleSidebar(false)">
       <template #top>
         <VPSponsors />
       </template>
@@ -149,5 +140,5 @@ onMounted(async () => {
       </template>
     </VPContent>
     <Debug />
-  </el-scrollbar>
+  </div>
 </template>

docs/.vitepress/vitepress/composables/active-bar.ts

@@ -1,19 +1,15 @@
-import { nextTick, onMounted, onUpdated } from 'vue'
+import { onMounted, onUnmounted, onUpdated } from 'vue'
 import { isClient } from '@vueuse/core'
 import { throttleAndDebounce } from '../utils'
 
 import type { Ref } from 'vue'
 
-type ManualLinkFn = (hash: string) => void
-
 export function useActiveSidebarLinks(
   container: Ref<HTMLElement>,
   marker: Ref<HTMLElement>
-): { manualLink: ManualLinkFn } | undefined {
+) {
   if (!isClient) return
 
-  let scrollDom: HTMLElement
-
   const onScroll = throttleAndDebounce(setActiveLink, 150)
   function setActiveLink() {
     const sidebarLinks = getSidebarLinks()
@@ -54,7 +50,6 @@ export function useActiveSidebarLinks(
         : (container.value.querySelector(
             `.toc-item a[href="${decodeURIComponent(hash)}"]`
           ) as HTMLAnchorElement))
-
     if (activeLink) {
       activeLink.classList.add('active')
       marker.value.style.opacity = '1'
@@ -71,31 +66,16 @@ export function useActiveSidebarLinks(
 
   onMounted(() => {
     window.requestAnimationFrame(setActiveLink)
-    scrollDom = document.querySelector('.App .el-scrollbar__wrap')!
-    scrollDom.onscroll = onScroll
-    location.hash &&
-      nextTick(() => {
-        manualLink(location.hash)
-      })
+    window.addEventListener('scroll', onScroll)
   })
 
   onUpdated(() => {
     activateLink(location.hash)
   })
 
-  function manualLink(hash: string) {
-    const anchor: HTMLElement | null = document.querySelector(hash)
-    if (!anchor) {
-      return
-    }
-    const top = anchor.offsetTop + anchor.offsetHeight
-    scrollDom?.scrollTo(0, top)
-    activateLink(location.hash)
-  }
-
-  return {
-    manualLink,
-  }
+  onUnmounted(() => {
+    window.removeEventListener('scroll', onScroll)
+  })
 }
 function getSidebarLinks() {
   return Array.from(
@@ -127,9 +107,7 @@ function isAnchorActive(
   anchor: HTMLAnchorElement,
   nextAnchor: HTMLAnchorElement
 ) {
-  const scrollTop = document.querySelector(
-    '.App .el-scrollbar__wrap'
-  )!.scrollTop
+  const scrollTop = window.scrollY
   if (index === 0 && scrollTop === 0) {
     return [true, null]
   }

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

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

docs/.vitepress/vitepress/styles/scrollbar.scss

@@ -27,3 +27,12 @@
     background-color: rgba(0, 0, 0, 0.3);
   }
 }
+
+.dark {
+  ::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.2);
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.4);
+    }
+  }
+}