fix(theme): ensure outline marker follows click

closes #3878
vuejs · May 11, 2024 · 9d9558a · 9d9558a
1 parent 99c0cec
commit 9d9558a
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/src/client/theme-default/composables/outline.ts b/src/client/theme-default/composables/outline.ts
@@ -117,10 +117,12 @@ export function useActiveAnchor(
   const onScroll = throttleAndDebounce(setActiveLink, 100)
 
   let prevActiveLink: HTMLAnchorElement | null = null
+  let ignoreScrollOnce: boolean = false
 
   onMounted(() => {
     requestAnimationFrame(setActiveLink)
     window.addEventListener('scroll', onScroll)
+    container.value.addEventListener('click', onClick)
   })
 
   onUpdated(() => {
@@ -130,13 +132,28 @@ export function useActiveAnchor(
 
   onUnmounted(() => {
     window.removeEventListener('scroll', onScroll)
+    container.value.removeEventListener('click', onClick)
   })
 
+  function onClick(e: MouseEvent) {
+    if (!isAsideEnabled.value || !(e.target instanceof HTMLAnchorElement)) {
+      return
+    }
+
+    activateLink(location.hash)
+    ignoreScrollOnce = true
+  }
+
   function setActiveLink() {
     if (!isAsideEnabled.value) {
       return
     }
 
+    if (ignoreScrollOnce) {
+      ignoreScrollOnce = false
+      return
+    }
+
     const scrollY = window.scrollY
     const innerHeight = window.innerHeight
     const offsetHeight = document.body.offsetHeight