feat(theme): adjust aside-container offsetTop

src/client/theme-default/components/VPDocAside.vue

@@ -2,12 +2,16 @@
 import { useData } from '../composables/data'
 import VPDocAsideOutline from './VPDocAsideOutline.vue'
 import VPDocAsideCarbonAds from './VPDocAsideCarbonAds.vue'
+import { ref, provide } from 'vue'
 
 const { theme } = useData()
+const aside = ref(null)
+
+provide('aside', aside)
 </script>
 
 <template>
-  <div class="VPDocAside">
+  <div class="VPDocAside" ref="aside">
     <slot name="aside-top" />
 
     <slot name="aside-outline-before" />

src/client/theme-default/components/VPDocAsideOutline.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { onContentUpdated } from 'vitepress'
-import { ref, shallowRef } from 'vue'
+import { inject, ref, type Ref, shallowRef } from 'vue'
 import { useData } from '../composables/data'
 import {
   getHeaders,
@@ -18,10 +18,11 @@ onContentUpdated(() => {
   headers.value = getHeaders(frontmatter.value.outline ?? theme.value.outline)
 })
 
+const aside = inject('aside') as Ref<HTMLElement>
 const container = ref()
 const marker = ref()
 
-useActiveAnchor(container, marker)
+useActiveAnchor(aside, container, marker)
 </script>
 
 <template>

src/client/theme-default/composables/outline.ts

@@ -109,6 +109,7 @@ export function resolveHeaders(
 }
 
 export function useActiveAnchor(
+  aside: Ref<HTMLElement>,
   container: Ref<HTMLElement>,
   marker: Ref<HTMLElement>
 ) {
@@ -194,24 +195,19 @@ export function useActiveAnchor(
     }
 
     const activeLink = prevActiveLink
-    const asideContainer =
-      container.value.parentElement?.parentElement?.parentElement
     if (activeLink) {
-      const offsetTop = activeLink.offsetTop + 39
       const rect = activeLink.getBoundingClientRect()
       const isInViewPort = rect.top >= 65 && rect.bottom <= innerHeight
       activeLink.classList.add('active')
       marker.value.style.top = activeLink.offsetTop + 39 + 'px'
       marker.value.style.opacity = '1'
-      if (asideContainer && !isInViewPort) {
-        asideContainer.scrollTop = offsetTop
+      if (!isInViewPort) {
+        activeLink.scrollIntoView({ block: 'center' })
       }
     } else {
       marker.value.style.top = '33px'
       marker.value.style.opacity = '0'
-      if (asideContainer) {
-        asideContainer.scrollTop = 0
-      }
+      aside.value.scrollTop = 0
     }
   }
 }