feat: support vertical scrolling for toc in desktop mode (#2064)

Author: cotes2020

_includes/toc.html

@@ -1,8 +1,9 @@
 {% include toc-status.html %}
 
 {% if enable_toc %}
-  <section id="toc-wrapper" class="ps-0 pe-4">
-    <h2 class="panel-heading ps-3 mb-2">{{- site.data.locales[include.lang].panel.toc -}}</h2>
+  <div class="toc-border-cover z-3"></div>
+  <section id="toc-wrapper" class="position-sticky ps-0 pe-4">
+    <h2 class="panel-heading ps-3 pb-2 mb-0">{{- site.data.locales[include.lang].panel.toc -}}</h2>
     <nav id="toc"></nav>
   </section>
 {% endif %}

_layouts/default.html

@@ -33,7 +33,7 @@
           </main>
 
           <!-- panel -->
-          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 mb-5 text-muted">
+          <aside aria-label="Panel" id="panel-wrapper" class="col-xl-3 ps-2 text-muted">
             <div class="access">
               {% include_cached update-list.html lang=lang %}
               {% include_cached trending-tags.html lang=lang %}

_sass/abstracts/_placeholders.scss

@@ -154,3 +154,7 @@
 %max-w-100 {
   max-width: 100%;
 }
+
+%panel-border {
+  border-left: 1px solid var(--main-border-color);
+}

_sass/layout/_panel.scss

@@ -6,19 +6,19 @@
   top: 2rem;
   transition: top 0.2s ease-in-out;
   margin-top: 3rem;
-  margin-bottom: 4rem;
 
   &:only-child {
     position: -webkit-sticky;
     position: sticky;
   }
 
   > section {
+    @extend %panel-border;
+
     padding-left: 1rem;
-    border-left: 1px solid var(--main-border-color);
 
-    &:not(:last-child) {
-      margin-bottom: 4rem;
+    &:not(:first-child) {
+      margin-top: 4rem;
     }
   }
 
@@ -48,6 +48,10 @@
     }
   }
 
+  > :last-child {
+    margin-bottom: 4rem;
+  }
+
   @include bp.lt(bp.get(xl)) {
     display: none;
   }

_sass/pages/_post.scss

@@ -246,14 +246,26 @@ header {
 }
 
 /* TOC panel */
-#toc-wrapper {
-  border-left: 1px solid rgba(158, 158, 158, 0.17);
-  position: -webkit-sticky;
+
+%top-cover {
+  content: '';
+  display: block;
   position: sticky;
-  top: 4rem;
+  top: 0;
+  width: 100%;
+  height: 3rem;
+  background: linear-gradient(var(--main-bg) 50%, transparent);
+}
+
+#toc-wrapper {
+  top: 0;
   transition: top 0.2s ease-in-out;
   -webkit-animation: fade-up 0.8s;
   animation: fade-up 0.8s;
+  overflow-y: auto;
+  max-height: calc(100vh - 2rem);
+  scrollbar-width: none;
+  margin-top: 2rem;
 
   ul {
     list-style: none;
@@ -266,6 +278,10 @@ header {
         margin: 0.4rem 0;
       }
 
+      &:first-child {
+        margin-top: 0;
+      }
+
       a {
         padding: 0.2rem 0 0.2rem 1.25rem;
       }
@@ -295,7 +311,6 @@ header {
       &::before {
         display: inline-block;
         width: 1px;
-        left: -1px;
         height: 1.25rem;
         background-color: var(--toc-highlight) !important;
       }
@@ -305,6 +320,30 @@ header {
       padding-left: 0.75rem;
     }
   }
+
+  @at-root .toc-border-cover {
+    @extend %top-cover;
+
+    margin-bottom: -4rem;
+  }
+
+  &::before {
+    @extend %top-cover;
+  }
+
+  &::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    width: 15%;
+    height: 3.25rem;
+    margin-left: -1px;
+    background: linear-gradient(transparent, var(--main-bg) 70%);
+  }
+
+  > * {
+    @extend %panel-border;
+  }
 }
 
 /* --- TOC button, bar and popup in mobile/tablet --- */