perf(theme): improve scroll padding top
This commit is contained in:
parent
320b5f7336
commit
86eefbab9b
@ -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(() => {
|
||||
|
||||
10
theme/src/client/styles/normalize.css
vendored
10
theme/src/client/styles/normalize.css
vendored
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user