feat(theme): scroll toc if active item is out of view (#5377)

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

@@ -37,6 +37,8 @@ defineProps<{
   font-size: 0.875rem;
   font-weight: 400;
   color: var(--vp-c-text-2);
+  scroll-margin-top: calc(var(--vp-nav-height) + var(--vp-layout-top-height, 0px) + var(--vp-doc-top-height, 0px) + 2rem);
+  scroll-margin-bottom: 3rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;

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

@@ -171,19 +171,17 @@ export function useActiveAnchor(
   }
 
   function activateLink(hash: string | null) {
-    if (prevActiveLink) {
-      prevActiveLink.classList.remove('active')
-    }
-
-    if (hash == null) {
-      prevActiveLink = null
-    } else {
-      prevActiveLink = container.value.querySelector(
+    const activeLink =
+      hash != null
+        ? container.value.querySelector<HTMLAnchorElement>(
             `a[href$="${decodeURIComponent(hash)}"]`
           )
-    }
+        : null
+
+    if (activeLink === prevActiveLink) return
 
-    const activeLink = prevActiveLink
+    prevActiveLink?.classList.remove('active')
+    prevActiveLink = activeLink
 
     if (activeLink) {
       activeLink.classList.add('active')
@@ -195,6 +193,7 @@ export function useActiveAnchor(
         (activeLink.offsetHeight - marker.value.offsetHeight) / 2 +
         'px'
       marker.value.style.opacity = '1'
+      activeLink.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
     } else {
       marker.value.style.top = ''
       marker.value.style.opacity = '0'