Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update scroll behavior so that sidebar maintains location #5229

Merged
merged 5 commits into from
Apr 13, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions docs/_static/custom.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,59 @@ window.addEventListener("DOMContentLoaded", function() {
link.setAttribute("target", "_blank");
});
});

// This function was adapted from pydata-sphinx-theme
// https://github.com/pydata/pydata-sphinx-theme/blob/733d9f3264020c8a5bd3dde38f3ee3e5cdb2979a/src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js#L133-L175
function scrollToActive() {
// If the docs nav doesn't exist, do nothing (e.g., on search page)
if (!document.querySelector(".sidebar-scroll")) {
return;
}

var sidebar = document.querySelector("div.sidebar-scroll");

// Remember the sidebar scroll position between page loads
// Inspired on source of revealjs.com
let storedScrollTop = parseInt(
sessionStorage.getItem("sidebar-scroll-top"),
10
);

if (!isNaN(storedScrollTop)) {
// If we've got a saved scroll position, just use that
sidebar.scrollTop = storedScrollTop;
console.log("Scrolled sidebar using stored browser position...");
} else {
// Otherwise, calculate a position to scroll to based on the lowest `active` link
var sidebarNav = document.querySelector(".sidebar-scroll");
var active_pages = sidebarNav.querySelectorAll(".current-page");
if (active_pages.length > 0) {
// Use the last active page as the offset since it's the page we're on
var latest_active = active_pages[active_pages.length - 1];
var offset =
latest_active.getBoundingClientRect().y -
sidebar.getBoundingClientRect().y;
// Only scroll the navbar if the active link is lower than 50% of the page
if (latest_active.getBoundingClientRect().y > window.innerHeight * 0.5) {
let buffer = 0.25; // Buffer so we have some space above the scrolled item
sidebar.scrollTop = offset - sidebar.clientHeight * buffer;
console.log("Scrolled sidebar using last active link...");
}
}
}

setTimeout(function() {
// sidebar is hidden by default, so we need to make it visible
// after scrolling. This prevents the scrollbar from jittering when
// the page loads.
console.log("Sidebar is now visible...")
sidebar.style.visibility = "visible";
}, 10);

// Store the sidebar scroll position
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("sidebar-scroll-top", sidebar.scrollTop);
});
}

document.addEventListener('DOMContentLoaded', scrollToActive);
1 change: 1 addition & 0 deletions docs/_static/flyte.css
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ h6 {

.sidebar-scroll {
scroll-behavior: auto;
visibility: hidden;
}

.sidebar-tree ul:first-child li:not(:last-child) {
Expand Down
Loading