diff options
| author | Eric Huss <eric@huss.org> | 2020-03-24 13:08:53 -0700 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2020-03-24 21:08:53 +0100 |
| commit | 21a16c9b75c6ba5714fc5909a3ebd413f5906800 (patch) | |
| tree | 3a37e581dad997fe881f02be2d5d90eb6fb71d4e | |
| parent | 4e8e1e14083b223383061391312eb595dc479eb5 (diff) | |
Scroll sidebar to middle instead of top. (#1161)
* Fix: Scroll sidebar to current active section (#1067)
* Clean: Some code related to PR #1052
* Change `scrollIntoViewIfNeeded` with `scrollIntoView`
* Don't use onload event for sidebar scroll to reduce flickering.
Co-authored-by: 李鸿章 <poodll@163.com>
| -rw-r--r-- | src/theme/book.js | 4 | ||||
| -rw-r--r-- | src/theme/index.hbs | 2 |
2 files changed, 3 insertions, 3 deletions
diff --git a/src/theme/book.js b/src/theme/book.js index dd33881a..1bfaf78d 100644 --- a/src/theme/book.js +++ b/src/theme/book.js @@ -409,7 +409,6 @@ function playpen_text(playpen) { (function sidebar() { var html = document.querySelector("html"); var sidebar = document.getElementById("sidebar"); - var sidebarScrollBox = document.querySelector(".sidebar-scrollbox"); var sidebarLinks = document.querySelectorAll('#sidebar a'); var sidebarToggleButton = document.getElementById("sidebar-toggle"); var sidebarResizeHandle = document.getElementById("sidebar-resize-handle"); @@ -508,7 +507,8 @@ function playpen_text(playpen) { // Scroll sidebar to current active section var activeSection = document.getElementById("sidebar").querySelector(".active"); if (activeSection) { - sidebarScrollBox.scrollTop = activeSection.offsetTop; + // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView + activeSection.scrollIntoView({ block: 'center' }); } })(); diff --git a/src/theme/index.hbs b/src/theme/index.hbs index 8f586e01..291e2796 100644 --- a/src/theme/index.hbs +++ b/src/theme/index.hbs @@ -87,7 +87,7 @@ </script> <nav id="sidebar" class="sidebar" aria-label="Table of contents"> - <div id="sidebar-scrollbox" class="sidebar-scrollbox"> + <div class="sidebar-scrollbox"> {{#toc}}{{/toc}} </div> <div id="sidebar-resize-handle" class="sidebar-resize-handle"></div> |