From 72b3227824712e57a2a03f44174aabd768f9c1ea Mon Sep 17 00:00:00 2001
From: Em Zhan <zqianem@gmail.com>
Date: Wed, 21 Jun 2023 19:18:54 -0500
Subject: [PATCH] Fix flicker when setting sidebar scroll position

Previously, sidebar scroll was set in an external script which caused a
flicker as the sidebar is initially rendered without any scroll before
being scrolled to the desired location.

Switching to an inline script right after the HTML tags for the sidebar
seems to avoid the flicker in most cases. In addition, logic is added to
avoid scrolling jumps when navigating via links within the sidebar.
---
 src/theme/book.js   |  7 -------
 src/theme/index.hbs | 22 ++++++++++++++++++++++
 2 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/theme/book.js b/src/theme/book.js
index 1911b118..67a8a5b0 100644
--- a/src/theme/book.js
+++ b/src/theme/book.js
@@ -551,13 +551,6 @@ function playground_text(playground, hidden = true) {
             firstContact = null;
         }
     }, { passive: true });
-
-    // Scroll sidebar to current active section
-    var activeSection = document.getElementById("sidebar").querySelector(".active");
-    if (activeSection) {
-        // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
-        activeSection.scrollIntoView({ block: 'center' });
-    }
 })();
 
 (function chapterNavigation() {
diff --git a/src/theme/index.hbs b/src/theme/index.hbs
index 195e41bc..80315c48 100644
--- a/src/theme/index.hbs
+++ b/src/theme/index.hbs
@@ -110,6 +110,28 @@
             <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
         </nav>
 
+        <!-- Track and set sidebar scroll position -->
+        <script>
+            var sidebarScrollbox = document.querySelector('#sidebar .sidebar-scrollbox');
+            sidebarScrollbox.addEventListener('click', function(e) {
+                if (e.target.tagName === 'A') {
+                    sessionStorage.setItem('sidebar-scroll', sidebarScrollbox.scrollTop);
+                }
+            }, { passive: true });
+            var sidebarScrollTop = sessionStorage.getItem('sidebar-scroll');
+            sessionStorage.removeItem('sidebar-scroll');
+            if (sidebarScrollTop) {
+                // preserve sidebar scroll position when navigating via links within sidebar
+                sidebarScrollbox.scrollTop = sidebarScrollTop;
+            } else {
+                // scroll sidebar to current active section when navigating via "next/previous chapter" buttons
+                var activeSection = document.querySelector('#sidebar .active');
+                if (activeSection) {
+                    activeSection.scrollIntoView({ block: 'center' });
+                }
+            }
+        </script>
+
         <div id="page-wrapper" class="page-wrapper">
 
             <div class="page">