bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

rustdoc: improve scroll locking in the rustdoc mobile sidebars

Browse source 
This commit ports the scroll locking behavior from the source sidebar to the
regular sidebar, and also fixes some bad behavior where opening a "mobile"
sidebar, and growing the viewport so that the "desktop" mode without scroll
locking is activated, could potentially leave the page stuck.

This does not affect the behavior on larger screens. Only small ones, where
the sidebar covers up the main content.
This commit is contained in:
Michael Howell 2022-06-30 17:28:29 -07:00
parent 54f79babae
commit 6b60bc6408
4 changed files with 101 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/librustdoc/html/static/js/main.js
View file

@ -348,8 +348,7 @@ function loadCss(cssFileName) {
function onHashChange(ev) {
// If we're in mobile mode, we should hide the sidebar in any case.
const sidebar = document.getElementsByClassName("sidebar")[0];
removeClass(sidebar, "shown");
hideSidebar();
handleHashes(ev);
}
@ -731,11 +730,50 @@ function loadCss(cssFileName) {
});
}());
let oldSidebarScrollPosition = null;
function showSidebar() {
if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) {
// This is to keep the scroll position on mobile.
oldSidebarScrollPosition = window.scrollY;
document.body.style.width = `${document.body.offsetWidth}px`;
document.body.style.position = "fixed";
document.body.style.top = `-${oldSidebarScrollPosition}px`;
document.querySelector(".mobile-topbar").style.top = `${oldSidebarScrollPosition}px`;
document.querySelector(".mobile-topbar").style.position = "relative";
} else {
oldSidebarScrollPosition = null;
}
const sidebar = document.getElementsByClassName("sidebar")[0];
addClass(sidebar, "shown");
}
function hideSidebar() {
if (oldSidebarScrollPosition !== null) {
// This is to keep the scroll position on mobile.
document.body.style.width = "";
document.body.style.position = "";
document.body.style.top = "";
document.querySelector(".mobile-topbar").style.top = "";
document.querySelector(".mobile-topbar").style.position = "";
// The scroll position is lost when resetting the style, hence why we store it in
// `oldSidebarScrollPosition`.
window.scrollTo(0, oldSidebarScrollPosition);
oldSidebarScrollPosition = null;
}
const sidebar = document.getElementsByClassName("sidebar")[0];
removeClass(sidebar, "shown");
}
window.addEventListener("resize", () => {
if (window.innerWidth >= window.RUSTDOC_MOBILE_BREAKPOINT &&
oldSidebarScrollPosition !== null) {
// If the user opens the sidebar in "mobile" mode, and then grows the browser window,
// we need to switch away from mobile mode and make the main content area scrollable.
hideSidebar();
}
});
function handleClick(id, f) {
const elem = document.getElementById(id);
if (elem) {
@ -778,9 +816,9 @@ function loadCss(cssFileName) {
sidebar_menu_toggle.addEventListener("click", () => {
const sidebar = document.getElementsByClassName("sidebar")[0];
if (!hasClass(sidebar, "shown")) {
addClass(sidebar, "shown");
showSidebar();
} else {
removeClass(sidebar, "shown");
hideSidebar();
}
});
}