fix: article outline scrolling issue on chrome

#26

Author: carsakiller

package-lock.json

@@ -13,13 +13,15 @@
   "dependencies": {
     "@astrojs/mdx": "^2.0.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
+    "@types/lodash": "^4.14.202",
     "astro": "^4.0.3",
     "autoprefixer": "^10.4.14",
     "axios": "^1.6.0",
     "dayjs": "^1.11.9",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.8.0",
     "jsdom": "^22.1.0",
+    "lodash": "^4.17.21",
     "mermaid": "^10.2.4",
     "playwright": "^1.36.1",
     "rehype-mdx-code-props": "^1.0.0",

package.json

@@ -130,39 +130,41 @@ export interface Props {
 </script>
 
 <script>
+  import lodash from "lodash";
+
   const headings = document.querySelectorAll(
     "article .heading,.article-metadata h1"
   );
   const outline = document.querySelector("#outline .content");
 
+  let topLink: HTMLAnchorElement;
   const intersectionObserver = new IntersectionObserver((entries) => {
-    let topLink;
-
     for (const entry of entries) {
       const outlineLink = outline?.querySelector(
         `a[href="#${entry.target.id}"]`
       );
 
       if (entry.intersectionRatio > 0) {
         outlineLink?.classList.add("in-view");
-        topLink = outlineLink as HTMLDivElement;
+        topLink = outlineLink as HTMLAnchorElement;
       } else {
         outlineLink?.classList.remove("in-view");
       }
     }
+  });
 
-    const outlineHasScroll =
-      (outline?.scrollHeight ?? 0) > (outline?.clientHeight ?? 0);
+  headings.forEach((heading) => intersectionObserver.observe(heading));
 
-    if (outlineHasScroll && topLink) {
+  document.addEventListener(
+    "scroll",
+    lodash.debounce(() => {
+      console.warn("INVOKE");
       outline?.scrollTo({
         top: topLink.offsetTop - outline.clientHeight / 2,
         behavior: "smooth",
       });
-    }
-  });
-
-  headings.forEach((heading) => intersectionObserver.observe(heading));
+    }, 10)
+  );
 </script>
 
 <style lang="scss">