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>
This commit is contained in:
Eric Huss 2020-03-24 13:08:53 -07:00 committed by GitHub
parent 4e8e1e1408
commit 21a16c9b75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 3 additions and 3 deletions

View File

@ -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' });
}
})();

View File

@ -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>