yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

perf(theme): improve scroll padding top

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
theme/src/client/composables/outline.ts
View File

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

10
theme/src/client/styles/normalize.css vendored
View File

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