Merge pull request #2104 from zqianem/gh-443/sidebar-scroll
Fix flicker when setting sidebar scroll position
This commit is contained in:
commit
e18113a746
|
@ -551,13 +551,6 @@ function playground_text(playground, hidden = true) {
|
||||||
firstContact = null;
|
firstContact = null;
|
||||||
}
|
}
|
||||||
}, { passive: true });
|
}, { 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() {
|
(function chapterNavigation() {
|
||||||
|
|
|
@ -110,6 +110,28 @@
|
||||||
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
<div id="sidebar-resize-handle" class="sidebar-resize-handle"></div>
|
||||||
</nav>
|
</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 id="page-wrapper" class="page-wrapper">
|
||||||
|
|
||||||
<div class="page">
|
<div class="page">
|
||||||
|
|
Loading…
Reference in New Issue