🛠️ fix scroll problem

bcw222 · Oct 19, 2024 · 625539b · 625539b
1 parent c056ad0
commit 625539b
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 45 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -42,7 +42,7 @@ export default defineConfig({
         hover: true,
         visible: false
       },
-      theme: 'slide',
+      // theme: 'slide',
       containers: ["#swup"],
     }),
     terser({

diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro
@@ -4,7 +4,7 @@ import { SITE_TITLE } from "../consts";
 ---
 
 <navbar
-  class="navbar max-md:translate-y-0 fixed px-2 w-full transform -translate-y-full text-center z-50 transition-transform bg-base-100 shadow-xl"
+  class="navbar max-md:translate-y-0 fixed px-2 w-full transform -translate-y-full text-center z-50 transition-colors bg-base-100 shadow-xl"
 >
   <div class="navbar-start">
     <details class="dropdown" id="dropdown">
@@ -33,7 +33,7 @@ import { SITE_TITLE } from "../consts";
     <a class="btn btn-ghost text-xl" href="/">{SITE_TITLE}</a>
   </div>
   <div class="navbar-end">
-    <div class="flex justify-center card bg-base-100 w-12 h-12">
+    <div class="flex justify-center card w-12 h-12">
       <label for="themeToggle2" id="themeLabel2" class="hidden"
         ><span class="sr-only">Theme Toggle</span>
         <input type="checkbox" id="themeToggle2" />

diff --git a/src/components/SidebarTool.astro b/src/components/SidebarTool.astro
@@ -40,10 +40,14 @@ import ThemeIcon from "../components/ThemeIcon.astro";
   }
 
   function addContent() {
-    const headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    const tocBox = document.getElementById("content-box") || null;
+    const headings = Array.from(
+      document.querySelectorAll("h1, h2, h3, h4, h5, h6"),
+    );
 
     const generateTocContent = () => {
-      let tocContent = "<ul class='overflow-auto w-full list-none m-0 p-0'>";
+      let tocContent =
+        "<ul class='overflow-auto w-full list-none m-0 p-0' id='catalogs'>";
       let levelCounters = [0, 0, 0, 0, 0, 0];
       headings.forEach((heading) => {
         let headingText = getCleanText(heading as HTMLElement);
@@ -57,67 +61,58 @@ import ThemeIcon from "../components/ThemeIcon.astro";
           levelCounters.fill(0, level + 1);
           var numbering = levelCounters.slice(1, level + 1).join(".");
           if (numbering == "") numbering = "⚝";
-          tocContent += `<li class="list-none m-0 p-0"><a class="w-full text-base font-semibold p-2 level-${headingLevel}" href="#${headingId}"><span class="toc-number">${numbering}</span>${headingText}</a></li>`;
+          tocContent += `
+            <li class="list-none m-0 p-0">
+              <a class="w-full text-base font-semibold p-2 level-${headingLevel}" href="#${headingId}">
+                <span class="toc-number">${numbering}</span>${headingText}
+              </a>
+            </li>`;
         }
       });
       tocContent += "</ul>";
       return tocContent;
     };
-    const tocBox = document.getElementById("content-box");
 
     if (tocBox) {
       tocBox.innerHTML = generateTocContent();
     }
-  }
 
-  function highlightCurrentHeading() {
-    const headings = Array.from(
-      document.querySelectorAll("h1, h2, h3, h4, h5, h6"),
-    );
-
-    let lastActiveLink: Element | null = null;
+    const getTotalHeight = (headings: Element[], currentIndex: number) => {
+      let totalHeight = 0;
+      if (currentIndex > 0) currentIndex--;
+      for (let i = 0; i < currentIndex; i++) {
+        const currentHeading = document.querySelector(
+          `a[href="#${headings[i].id}"]`,
+        ) as HTMLElement;
+        totalHeight += currentHeading.offsetHeight;
+      }
+      return totalHeight;
+    };
 
-    const onScroll = () => {
+    const UpdateCurrentHeading = () => {
       let currentIndex = headings.findIndex((heading) => {
         return heading.getBoundingClientRect().top > window.innerHeight * 0.2;
       });
-
       if (currentIndex === -1) {
         currentIndex = headings.length - 1;
       } else if (currentIndex > 0) {
         currentIndex -= 1;
       }
-
-      const currentHeading = headings[currentIndex];
-      const currentLink = document.querySelector(
-        `a[href="#${currentHeading.id}"]`,
-      );
-
-      if (lastActiveLink) {
-        lastActiveLink.classList.remove("active");
-      }
-
-      if (currentLink) {
-        currentLink.classList.add("active");
-        const linkRect = currentLink.getBoundingClientRect();
-        const viewportHeight = window.innerHeight;
-        if (linkRect.top < viewportHeight && linkRect.bottom > 0) {
-          currentLink.scrollIntoView({ behavior: "smooth", block: "nearest" });
-        }
-        lastActiveLink = currentLink;
+      const currentHeading = document.querySelector(
+        `a[href="#${headings[currentIndex].id}"]`,
+      ) as HTMLElement;
+      if (currentHeading) {
+        document.querySelector(".active")?.classList.remove("active");
+        currentHeading.classList.add("active");
+        document.getElementById("catalogs")?.scrollTo({
+          top: getTotalHeight(headings, currentIndex),
+          behavior: "smooth",
+        });
       }
     };
-
-    document.addEventListener("scroll", onScroll);
+    document.addEventListener("scroll", UpdateCurrentHeading);
   }
 
-  document.addEventListener("DOMContentLoaded", () => {
-    addContent();
-    highlightCurrentHeading();
-  });
-
-  document.addEventListener("swup:page:view", () => {
-    addContent();
-    highlightCurrentHeading();
-  });
+  document.addEventListener("DOMContentLoaded", addContent);
+  document.addEventListener("swup:page:view", addContent);
 </script>