From fd4fb4c52becf0043d6433c369f2042448aa5c8e Mon Sep 17 00:00:00 2001
From: Narath Carlile <narathc@gmail.com>
Date: Thu, 9 Jul 2026 11:50:23 -0400
Subject: [PATCH] fix: scroll only the explorer container, not the whole window
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On page load the explorer reveals the active item with
`activeElement.scrollIntoView({ behavior: "smooth" })`. `scrollIntoView`
scrolls *every* scrollable ancestor, including the document, so when SPA
routing is disabled (each navigation is a full page load) the window gets
dragged down to wherever the active item sits in the sidebar — the reader
lands partway down the new page instead of at the top.

Use `explorerUl.scrollTo(...)`, which only moves the explorer's own scroll
container, to center the active item without ever scrolling the window.
The smooth animation is preserved.
---
 src/components/scripts/explorer.inline.ts | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/scripts/explorer.inline.ts b/src/components/scripts/explorer.inline.ts
index 2e2c2a1..1c9eb28 100644
--- a/src/components/scripts/explorer.inline.ts
+++ b/src/components/scripts/explorer.inline.ts
@@ -294,7 +294,23 @@ async function handleNavOrRender(e) {
         } else {
           const activeElement = explorerUl.querySelector(".active");
           if (activeElement) {
-            activeElement.scrollIntoView({ behavior: "smooth" });
+            // Scroll only the explorer's own container to reveal the active item.
+            // `scrollIntoView` scrolls every scrollable ancestor (including the
+            // document/window); with SPA disabled, each full page load then drags
+            // the whole page down to wherever the active item sits, so the reader
+            // lands partway down the page instead of at the top. `Element.scrollTo`
+            // moves this container alone and never touches the window.
+            const containerRect = explorerUl.getBoundingClientRect();
+            const activeRect = activeElement.getBoundingClientRect();
+            explorerUl.scrollTo({
+              top:
+                explorerUl.scrollTop +
+                activeRect.top -
+                containerRect.top -
+                explorerUl.clientHeight / 2 +
+                activeElement.offsetHeight / 2,
+              behavior: "smooth",
+            });
           }
         }
       } else {