From c59cb293bf3f3b4415b31ca9420c1d449cf2fad4 Mon Sep 17 00:00:00 2001
From: ZhenShuo Leo <98386542+ZhenShuo2021@users.noreply.github.com>
Date: Mon, 5 May 2025 08:30:34 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Feat:=20Prevent=20ToC=20flicker=20o?=
 =?UTF-8?q?n=20initial=20load?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Use CSS to control ToC height instead of JavaScript to prevent flickering.
---
 assets/css/compiled/main.css |  9 +++++++--
 assets/css/main.css          |  6 ++++++
 layouts/partials/toc.html    | 31 ++-----------------------------
 3 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 4260f50f..e27a715c 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -1507,8 +1507,8 @@ body.zen-mode-enable {
   .overflow-visible {
     overflow: visible;
   }
-  .overflow-y-scroll {
-    overflow-y: scroll;
+  .overflow-y-auto {
+    overflow-y: auto;
   }
   .overscroll-contain {
     overscroll-behavior: contain;
@@ -3537,6 +3537,11 @@ body a, body button {
 #TableOfContents {
   max-width: 25vw;
 }
+#TOCView {
+  max-height: calc(100vh - 150px);
+  min-height: 0;
+  overflow-x: hidden;
+}
 .toc ul, .toc li {
   list-style-type: none;
   padding-inline: calc(var(--spacing) * 0);
diff --git a/assets/css/main.css b/assets/css/main.css
index b2e71447..6b67490a 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -63,6 +63,12 @@ body button {
   max-width: 25vw;
 }
 
+#TOCView {
+    max-height: calc(100vh - 150px);
+    min-height: 0;
+    overflow-x: hidden;
+}
+
 .toc ul,
 .toc li {
   @apply px-0 leading-snug list-none;
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
index 5f3ffa1f..f7d0acf7 100644
--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@@ -1,5 +1,4 @@
-<details open id="TOCView"
-  class="toc-right mt-0 overflow-y-scroll overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
+<details open id="TOCView" class="toc-right mt-0 overflow-y-auto overscroll-contain scrollbar-thin scrollbar-track-neutral-200 scrollbar-thumb-neutral-400 dark:scrollbar-track-neutral-800 dark:scrollbar-thumb-neutral-600 rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block">
   <summary
     class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">
     {{ i18n "article.table_of_contents" }}
@@ -21,32 +20,7 @@
 </details>
 
 <script>
-
-  var margin = 200;
-  var marginError = 50;
-
-  (function () {
-    var $window = $(window);
-    var $toc = $('#TOCView');
-    var tocHeight = $toc.height();
-
-    function onResize() {
-      var windowAndMarginHeight = $window.height() - margin;
-      if(tocHeight >= windowAndMarginHeight) {
-        $toc.css("overflow-y", "scroll")
-        $toc.css("max-height", (windowAndMarginHeight + marginError) + "px")
-      } else {
-        $toc.css("overflow-y", "hidden")
-        $toc.css("max-height", "9999999px")
-      }
-    }
-
-    $window.on('resize', onResize);
-    $(document).ready(onResize);
-  })();
-
 {{ if .Site.Params.smartTOC }}
-
   (function () {
     var $toc = $('#TableOfContents');
     if ($toc.length > 0) {
@@ -72,7 +46,7 @@
             $(e).removeClass('active');
           {{ end }}
         });
-        $toc.find('a[href="#' + id + '"]').addClass('active')
+        $toc.find('a[href="#' + id + '"]').addClass('active');
         $toc.find('a[href="#' + id + '"]').parentsUntil('#TableOfContents').each(function (i, e) {
           $(e).children('a').parents('ul').show();          
         });
@@ -88,5 +62,4 @@
     }
   })();
 {{ end }}
-
 </script>