Highlight the last canvas TOC section when scrolled to the bottom

Author: rohithreddykota

web-common/src/features/canvas/toc/scrollspy.spec.ts

@@ -91,6 +91,34 @@ describe("createScrollSpy", () => {
     expect(get(spy.activeId)).toBe("b");
   });
 
+  it("activates the last entry when the container is scrolled to the bottom", () => {
+    Object.defineProperty(root, "clientHeight", {
+      value: 500,
+      configurable: true,
+    });
+    Object.defineProperty(root, "scrollHeight", {
+      value: 1000,
+      configurable: true,
+    });
+
+    const spy = createScrollSpy(root);
+    // A middle heading is in the band, but the last one can never reach it.
+    const entries = [entry("a", -100), entry("b", 20), entry("c", 480)];
+    spy.setEntries(entries);
+    fireIntersections({ b: true });
+    expect(get(spy.activeId)).toBe("b");
+
+    // Scroll to the bottom: the last entry wins.
+    root.scrollTop = 500;
+    root.dispatchEvent(new Event("scroll"));
+    expect(get(spy.activeId)).toBe("c");
+
+    // Scroll back up: normal tracking resumes.
+    root.scrollTop = 0;
+    root.dispatchEvent(new Event("scroll"));
+    expect(get(spy.activeId)).toBe("b");
+  });
+
   it("setActive overrides the computed section immediately", () => {
     const spy = createScrollSpy(root);
     spy.setEntries([entry("a", -10), entry("b", 50)]);

web-common/src/features/canvas/toc/scrollspy.ts

@@ -25,7 +25,8 @@ export type ScrollSpy = {
  * The `rootMargin` shrinks the observed viewport to a band near the top of the container, so a
  * heading counts as "in view" once it reaches that band. The active entry is the topmost heading
  * currently in the band; when the band is empty (scrolled between two headings), the last heading
- * above the band stays active, so there is always exactly one active item.
+ * above the band stays active, so there is always exactly one active item. When the container is
+ * scrolled to the bottom, the last entry is activated, since trailing sections can't reach the band.
  */
 export function createScrollSpy(root: HTMLElement): ScrollSpy {
   const activeId = writable<string | null>(null);
@@ -35,12 +36,29 @@ export function createScrollSpy(root: HTMLElement): ScrollSpy {
   // While locked (during a click-to-scroll), observer updates are ignored so the active item stays
   // pinned to the target instead of walking through every section the scroll passes.
   let locked = false;
+  // Whether the container is scrolled to its bottom. A trailing section can never reach the top
+  // activation band (the container bottoms out first), so at the bottom we activate the last entry.
+  let atBottom = false;
   // Tracks per-id intersection state so we can pick the topmost visible heading on each change.
   const intersecting = new Map<string, boolean>();
 
+  function isAtBottom(): boolean {
+    // Only when the container is actually scrollable and scrolled to (near) its end.
+    return (
+      root.scrollHeight > root.clientHeight &&
+      root.scrollTop + root.clientHeight >= root.scrollHeight - 2
+    );
+  }
+
   function recompute() {
     if (locked) return;
 
+    // At the bottom, highlight the last section (it can't scroll up into the activation band).
+    if (atBottom && entries.length > 0) {
+      activeId.set(entries[entries.length - 1].id);
+      return;
+    }
+
     // Prefer the topmost heading currently in the activation band.
     const visible = entries.filter((e) => intersecting.get(e.id));
     if (visible.length > 0) {
@@ -66,6 +84,8 @@ export function createScrollSpy(root: HTMLElement): ScrollSpy {
     entries = next;
     intersecting.clear();
     observer?.disconnect();
+    // Content height changed, so re-check bottom state before recomputing.
+    atBottom = isAtBottom();
 
     if (typeof IntersectionObserver === "undefined" || next.length === 0) {
       activeId.set(next[0]?.id ?? null);
@@ -88,6 +108,18 @@ export function createScrollSpy(root: HTMLElement): ScrollSpy {
     recompute();
   }
 
+  // A lightweight passive listener that only tracks entering/leaving the bottom (an O(1) check) and
+  // recomputes on that transition. The IntersectionObserver still drives normal tracking; this does
+  // not recompute on every scroll frame.
+  function onScroll() {
+    const next = isAtBottom();
+    if (next !== atBottom) {
+      atBottom = next;
+      recompute();
+    }
+  }
+  root.addEventListener("scroll", onScroll, { passive: true });
+
   return {
     activeId,
     setEntries,
@@ -100,6 +132,9 @@ export function createScrollSpy(root: HTMLElement): ScrollSpy {
       locked = false;
       recompute();
     },
-    destroy: () => observer?.disconnect(),
+    destroy: () => {
+      root.removeEventListener("scroll", onScroll);
+      observer?.disconnect();
+    },
   };
 }