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:
parent
4e8e1e1408
commit
21a16c9b75
|
@ -409,7 +409,6 @@ function playpen_text(playpen) {
|
||||||
(function sidebar() {
|
(function sidebar() {
|
||||||
var html = document.querySelector("html");
|
var html = document.querySelector("html");
|
||||||
var sidebar = document.getElementById("sidebar");
|
var sidebar = document.getElementById("sidebar");
|
||||||
var sidebarScrollBox = document.querySelector(".sidebar-scrollbox");
|
|
||||||
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
var sidebarLinks = document.querySelectorAll('#sidebar a');
|
||||||
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
var sidebarToggleButton = document.getElementById("sidebar-toggle");
|
||||||
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
|
var sidebarResizeHandle = document.getElementById("sidebar-resize-handle");
|
||||||
|
@ -508,7 +507,8 @@ function playpen_text(playpen) {
|
||||||
// Scroll sidebar to current active section
|
// Scroll sidebar to current active section
|
||||||
var activeSection = document.getElementById("sidebar").querySelector(".active");
|
var activeSection = document.getElementById("sidebar").querySelector(".active");
|
||||||
if (activeSection) {
|
if (activeSection) {
|
||||||
sidebarScrollBox.scrollTop = activeSection.offsetTop;
|
// https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
|
||||||
|
activeSection.scrollIntoView({ block: 'center' });
|
||||||
}
|
}
|
||||||
})();
|
})();
|
||||||
|
|
||||||
|
|
|
@ -87,7 +87,7 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
|
||||||
<div id="sidebar-scrollbox" class="sidebar-scrollbox">
|
<div class="sidebar-scrollbox">
|
||||||
{{#toc}}{{/toc}}
|
{{#toc}}{{/toc}}
|
||||||
</div>
|
</div>
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
||||||
|
|
Loading…
Reference in New Issue