docker
/
docs
mirror of https://github.com/docker/docs.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

js: remove sidebar scrolldown effect 

When accessing a page that's far down the left-hand sidebar, we have a
script that would scroll the sidebar position down so that the selected
item is visible. In some cases, this would cause some confusion and
jittery rendering on page load.

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
This commit is contained in:
David Karlsson 2024-01-25 08:31:57 +01:00
parent ff459f0dcd
commit a6a5cb5ebe
1 changed files with 1 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
assets/js/src/sidebar.js
View File

@ -1,18 +1,3 @@
// Scroll the given menu item into view. We actually pick the item *above*
// the current item to give some headroom above
function scrollMenuItem() {
let item = sectiontree.querySelector('[aria-current="page"]');
if (!item) return;
item = item.parentElement.closest("li");
if (item) {
const itemY = item.getBoundingClientRect().y;
// scroll to the item y-coord (with a 150px padding for some head room)
if (itemY > window.innerHeight - 150) {
sidebar.scrollTop = itemY - 150;
}
}
}
function toggleMenuItem(event) { function toggleMenuItem(event) {
const section = event.currentTarget.parentElement; const section = event.currentTarget.parentElement;
const icon = section.querySelector(".icon"); const icon = section.querySelector(".icon");
@ -26,9 +11,7 @@ function toggleMenuItem(event) {
} }
const sectiontree = document.querySelector("#sectiontree"); const sectiontree = document.querySelector("#sectiontree");
const sidebar = document.querySelector("#sidebar"); if (sectiontree) {
if (sectiontree && sidebar) {
scrollMenuItem();
for (const button of sectiontree.querySelectorAll("button")) { for (const button of sectiontree.querySelectorAll("button")) {
button.addEventListener("click", toggleMenuItem); button.addEventListener("click", toggleMenuItem);
} }