Fix sidebar scroll position when heading nav is involved

This fixes an issue where the sidebar was scrolling incorrectly when
clicking on chapters when a heading nav is currently in view. The
problem was that it was storing the scrollTop of the sidebar, but it was
not considering that when navigating to another chapter that the heading
nav of the previous chapter would disappear.

The solution is to keep of an offset instead so that it can make sure
that the vertical position of the clicked chapter stays in the same
relative position when the new page loads.

Fixes #2967

Author: ehuss

crates/mdbook-html/front-end/templates/toc.js.hbs

@@ -40,14 +40,22 @@ class MDBookSidebarScrollbox extends HTMLElement {
         // Track and set sidebar scroll position
         this.addEventListener('click', e => {
             if (e.target.tagName === 'A') {
-                sessionStorage.setItem('sidebar-scroll', this.scrollTop);
+                const clientRect = e.target.getBoundingClientRect();
+                const sidebarRect = this.getBoundingClientRect();
+                sessionStorage.setItem('sidebar-scroll-offset', clientRect.top - sidebarRect.top);
             }
         }, { passive: true });
-        const sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
-        sessionStorage.removeItem('sidebar-scroll');
-        if (sidebarScrollTop) {
+        const sidebarScrollOffset = sessionStorage.getItem('sidebar-scroll-offset');
+        sessionStorage.removeItem('sidebar-scroll-offset');
+        if (sidebarScrollOffset !== null) {
             // preserve sidebar scroll position when navigating via links within sidebar
-            this.scrollTop = sidebarScrollTop;
+            const activeSection = this.querySelector('.active');
+            if (activeSection) {
+                const clientRect = activeSection.getBoundingClientRect();
+                const sidebarRect = this.getBoundingClientRect();
+                const currentOffset = clientRect.top - sidebarRect.top;
+                this.scrollTop += currentOffset - parseFloat(sidebarScrollOffset);
+            }
         } else {
             // scroll sidebar to current active section when navigating via
             // 'next/previous chapter' buttons

tests/gui/books/sidebar-scroll/book.toml

@@ -0,0 +1,3 @@
+[book]
+title = "sidebar-scroll"
+language = "en"