refactor: better scroll toc

zyrouge · Apr 4, 2024 · c9caabc · c9caabc
1 parent 14a3633
commit c9caabc
Showing 1 changed file with 21 additions and 10 deletions.
diff --git a/src/assets/scripts/article.ts b/src/assets/scripts/article.ts
@@ -74,19 +74,30 @@ class ArticleState {
         let onScrollEndInterval: ReturnType<typeof setTimeout> | null = null;
         document.addEventListener("scroll", () => {
             clearInterval(onScrollEndInterval ?? undefined);
+            onScrollEndInterval = setTimeout(() => this.emitOnScrollEnd(), 50);
             const scrollingElement = document.scrollingElement;
-            if (scrollingElement) {
-                let visibleHeading = this.currentHeading;
-                for (const x of Object.values(this.headings)) {
-                    if (scrollingElement.scrollTop < x.content.offsetTop) {
-                        break;
-                    }
-                    visibleHeading = x;
+            if (!scrollingElement) return;
+            const visibleHeight = document.documentElement.clientHeight;
+            const scrollBottom = scrollingElement.scrollTop + visibleHeight;
+            if (scrollBottom === document.body.clientHeight) {
+                const headings = Object.values(this.headings);
+                const lastHeading =
+                    headings[headings.length - 1] ?? this.currentHeading;
+                if (!lastHeading) return;
+                this.highlightTocHeading(lastHeading);
+                return;
+            }
+            let visibleHeading = this.currentHeading;
+            const scrollOffsetMid =
+                scrollingElement.scrollTop + visibleHeight / 3;
+            for (const x of Object.values(this.headings)) {
+                if (scrollOffsetMid < x.content.offsetTop) {
+                    break;
                 }
-                if (!visibleHeading) return;
-                this.highlightTocHeading(visibleHeading);
+                visibleHeading = x;
             }
-            onScrollEndInterval = setTimeout(() => this.emitOnScrollEnd(), 50);
+            if (!visibleHeading) return;
+            this.highlightTocHeading(visibleHeading);
         });
     }