perf(toc): optimized TOC anchor jump
This commit is contained in:
parent
88cea47545
commit
58941db28c
|
@ -73,6 +73,7 @@
|
|||
.nav-number
|
||||
.nav-text {
|
||||
color var(--primary-color)
|
||||
font-weight bold
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -80,6 +81,7 @@
|
|||
.nav-number
|
||||
.nav-text {
|
||||
color var(--primary-color)
|
||||
font-weight bold
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -266,8 +266,7 @@ $toc-container-width = 16rem
|
|||
box-sizing border-box
|
||||
width $toc-container-width
|
||||
max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
|
||||
padding-left 2rem
|
||||
padding-bottom 1rem
|
||||
padding 2rem 0 2rem 2rem
|
||||
transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
|
||||
|
||||
.header-shrink & {
|
||||
|
|
|
@ -29,16 +29,19 @@ function initTOC() {
|
|||
)
|
||||
element.addEventListener('click', (event) => {
|
||||
event.preventDefault()
|
||||
const offset = target.getBoundingClientRect().top + window.scrollY
|
||||
let winScrollY = window.scrollY
|
||||
winScrollY = winScrollY === 0 ? -20 : winScrollY
|
||||
const offset = target.getBoundingClientRect().top + winScrollY
|
||||
window.anime({
|
||||
targets: document.scrollingElement,
|
||||
duration: 500,
|
||||
easing: 'linear',
|
||||
scrollTop: offset - 10,
|
||||
complete: function () {
|
||||
complete: () => {
|
||||
history.pushState(null, document.title, element.href)
|
||||
setTimeout(() => {
|
||||
KEEP.utils.pageTop_dom.classList.add('hide')
|
||||
}, 100)
|
||||
}, 150)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
@ -60,7 +63,7 @@ function initTOC() {
|
|||
if (parent.matches('li')) parent.classList.add('active')
|
||||
parent = parent.parentNode
|
||||
}
|
||||
// Scrolling to center active TOC element if TOC content is taller then viewport.
|
||||
// Scrolling to center active TOC element if TOC content is taller than viewport.
|
||||
const tocElement = document.querySelector('.post-toc-wrap')
|
||||
window.anime({
|
||||
targets: tocElement,
|
||||
|
|
Loading…
Reference in New Issue