New element .sidebar-panel-container

layout/_macro/sidebar.njk

@@ -22,6 +22,7 @@
         </li>
       </ul>
 
+      <div class="sidebar-panel-container">
         <!--noindex-->
         <section class="post-toc-wrap sidebar-panel">
           {%- if display_toc %}
@@ -35,6 +36,7 @@
 
           {{- next_inject('sidebar') }}
         </section>
+      </div>
 
       {%- if theme.back2top.enable and theme.back2top.sidebar %}
         <div class="back-to-top animated">

source/css/_common/outline/sidebar/sidebar-nav.styl

@@ -35,13 +35,16 @@
   }
 }
 
-.sidebar-panel {
-  display: none;
+.sidebar-panel-container {
   max-height: var(--sidebar-wrapper-height);
   overflow-x: hidden;
   overflow-y: auto;
 }
 
+.sidebar-panel {
+  display: none;
+}
+
 .sidebar-overview-active .site-overview-wrap {
   // Flexbox layout makes it possible to reorder the child
   // elements of .site-overview-item through the `order` CSS property

source/js/utils.js

@@ -272,7 +272,7 @@ NexT.utils = {
       parent = parent.parentNode;
     }
     // Scrolling to center active TOC element if TOC content is taller then viewport.
-    const tocElement = document.querySelector('.post-toc-wrap');
+    const tocElement = document.querySelector('.sidebar-panel-container');
     window.anime({
       targets  : tocElement,
       duration : 200,