perf(theme): improve scroll padding top

This commit is contained in:
pengzhanbo 2025-04-01 21:18:22 +08:00
parent 320b5f7336
commit 86eefbab9b
2 changed files with 11 additions and 7 deletions

View File

@ -222,7 +222,7 @@ export function useActiveAnchor(container: Ref<HTMLElement | null>, marker: Ref<
// find the last header above the top of viewport
let activeLink: string | null = null
for (const { link, top } of headers) {
if (top > scrollY + 92)
if (top > scrollY + 80)
break
activeLink = link
@ -268,8 +268,10 @@ export function useActiveAnchor(container: Ref<HTMLElement | null>, marker: Ref<
}, { debounce: 500 })
onMounted(() => {
requestAnimationFrame(setActiveLink)
window.addEventListener('scroll', onScroll)
setTimeout(() => {
setActiveLink()
window.addEventListener('scroll', onScroll)
}, 1000)
})
onUpdated(() => {

View File

@ -23,16 +23,18 @@ html {
font-size: 16px;
line-height: 1.4;
scroll-padding-top: 0;
scroll-padding-top: 48px;
}
@media (min-width: 960px) {
html {
scroll-padding-top: 80px;
scroll-padding-top: 112px;
}
}
html.layout-home {
scroll-padding-top: var(--vp-nav-height, 80px);
@media (min-width: 1120px) {
html {
scroll-padding-top: 64px;
}
}