feat(theme): adjust aside-container offsetTop

Optimize the `aside-container` to update scroll behavior when the `activeLink` is out of the viewport.
pull/3901/head
Breno A. 1 year ago
parent db51f7aa43
commit 918b1204a4

@ -194,14 +194,24 @@ export function useActiveAnchor(
} }
const activeLink = prevActiveLink const activeLink = prevActiveLink
const asideContainer =
container.value.parentElement?.parentElement?.parentElement
if (activeLink) { if (activeLink) {
const offsetTop = activeLink.offsetTop + 39
const rect = activeLink.getBoundingClientRect()
const isInViewPort = rect.top >= 65 && rect.bottom <= innerHeight
activeLink.classList.add('active') activeLink.classList.add('active')
marker.value.style.top = activeLink.offsetTop + 39 + 'px' marker.value.style.top = activeLink.offsetTop + 39 + 'px'
marker.value.style.opacity = '1' marker.value.style.opacity = '1'
if (asideContainer && !isInViewPort) {
asideContainer.scrollTop = offsetTop
}
} else { } else {
marker.value.style.top = '33px' marker.value.style.top = '33px'
marker.value.style.opacity = '0' marker.value.style.opacity = '0'
if (asideContainer) {
asideContainer.scrollTop = 0
}
} }
} }
} }

Loading…
Cancel
Save