Fix sidebar scroll, fixed #63

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)

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;
   }