diff --git a/src/event.js b/src/event.js index 012961d..23a7467 100644 --- a/src/event.js +++ b/src/event.js @@ -10,6 +10,8 @@ export function scrollActiveSidebar () { let hoveredOverSidebar = false const anchors = document.querySelectorAll('.anchor') const sidebar = document.querySelector('aside.sidebar') + const sidebarHeight = sidebar.clientHeight + const nav = {} const lis = sidebar.querySelectorAll('li') let active = sidebar.querySelector('li.active') @@ -48,7 +50,25 @@ export function scrollActiveSidebar () { li.classList.add('active') active = li - !hoveredOverSidebar && !sticky.noSticky && active.scrollIntoView(false) + + // scroll into view + // https://github.com/vuejs/vuejs.org/blob/master/themes/vue/source/js/common.js#L282-L297 + if (!hoveredOverSidebar && !sticky.noSticky) { + const currentPageOffset = 0 + const currentActiveOffset = active.offsetTop + active.clientHeight + 40 + const currentActiveIsInView = ( + active.offsetTop >= sidebar.scrollTop && + currentActiveOffset <= sidebar.scrollTop + sidebarHeight + ) + const linkNotFurtherThanSidebarHeight = currentActiveOffset - currentPageOffset < sidebarHeight + const newScrollTop = currentActiveIsInView + ? sidebar.scrollTop + : linkNotFurtherThanSidebarHeight + ? currentPageOffset + : currentActiveOffset - sidebarHeight + + sidebar.scrollTop = newScrollTop + } } window.removeEventListener('scroll', highlight) diff --git a/src/themes/basic/_layout.css b/src/themes/basic/_layout.css index 5acaf5e..3a711c5 100644 --- a/src/themes/basic/_layout.css +++ b/src/themes/basic/_layout.css @@ -193,16 +193,7 @@ main { transition: transform 250ms ease-out; width: $sidebar-width; z-index: 20; - margin-bottom: 40px; - - &::after { - content: ''; - position: inherit; - left: calc($sidebar-width - 1px); - top: 0; - height: 100vh; - border-right: 1px solid rgba(0, 0, 0, .07); - } + border-right: 1px solid rgba(0, 0, 0, .07); > h1 { text-align: center; @@ -384,15 +375,6 @@ body.close { position: fixed; } - .sidebar { - margin-bottom: 0; - border-right: 1px solid rgba(0, 0, 0, .07); - - &::after { - content: none; - } - } - nav { margin-top: 16px; }