lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf(toc): optimized TOC anchor jump

This commit is contained in:
XPoet 2022-10-12 10:23:58 +08:00
parent 88cea47545
commit 58941db28c
3 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
source/css/layout/_partial/toc.styl
View File

@ -73,6 +73,7 @@
.nav-number .nav-number
.nav-text { .nav-text {
color var(--primary-color) color var(--primary-color)
font-weight bold
} }
} }
@ -80,6 +81,7 @@
.nav-number .nav-number
.nav-text { .nav-text {
color var(--primary-color) color var(--primary-color)
font-weight bold
} }
} }
} }

3
source/css/layout/article-content.styl
View File

@ -266,8 +266,7 @@ $toc-container-width = 16rem
box-sizing border-box box-sizing border-box
width $toc-container-width width $toc-container-width
max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value) max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
padding-left 2rem padding 2rem 0 2rem 2rem
padding-bottom 1rem
transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease") transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
.header-shrink & { .header-shrink & {

11
source/js/toc.js
View File

@ -29,16 +29,19 @@ function initTOC() {
) )
element.addEventListener('click', (event) => { element.addEventListener('click', (event) => {
event.preventDefault() 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({ window.anime({
targets: document.scrollingElement, targets: document.scrollingElement,
duration: 500, duration: 500,
easing: 'linear', easing: 'linear',
scrollTop: offset - 10, scrollTop: offset - 10,
complete: function () { complete: () => {
history.pushState(null, document.title, element.href)
setTimeout(() => { setTimeout(() => {
KEEP.utils.pageTop_dom.classList.add('hide') KEEP.utils.pageTop_dom.classList.add('hide')
}, 100) }, 150)
} }
}) })
}) })
@ -60,7 +63,7 @@ function initTOC() {
if (parent.matches('li')) parent.classList.add('active') if (parent.matches('li')) parent.classList.add('active')
parent = parent.parentNode 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') const tocElement = document.querySelector('.post-toc-wrap')
window.anime({ window.anime({
targets: tocElement, targets: tocElement,