bjoernager/rust
bjoernager/rust
1
Fork 0
Code Activity

rustdoc: use CSS overscroll-behavior instead of JavaScript

Browse source 
Fixes the desktop scrolling weirdness mentioned in
https://github.com/rust-lang/rust/pull/98775#issuecomment-1182575603

As described in the MDN page for this property:

* The current Firefox ESR is 102, and the first Firefox version
  to support this feature is 59.
* The current Chrome version 112, and the first version to support
  this is 63.
* Edge is described as having a minor bug in `none` mode, but we
  use `contain` mode anyway, so it doesn't matter.
* Safari 16, released September 2022, is the last browser to
  add this feature, and is also the oldest version we officially
  support.
This commit is contained in:
Michael Howell 2023-04-10 16:15:51 -07:00
parent 661b33f524
commit bb7ed64f45
5 changed files with 19 additions and 96 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -4,11 +4,6 @@
"use strict";
// WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY
// If you update this line, then you also need to update the media query with the same
// warning in rustdoc.css
window.RUSTDOC_MOBILE_BREAKPOINT = 700;
// Given a basename (e.g. "storage") and an extension (e.g. ".js"), return a URL
// for a resource under the root-path, with the resource-suffix.
function resourcePath(basename, extension) {
@ -730,65 +725,18 @@ function preLoadCss(cssUrl) {
window.rustdoc_add_line_numbers_to_examples();
}
let oldSidebarScrollPosition = null;
// Scroll locking used both here and in source-script.js
window.rustdocMobileScrollLock = function() {
const mobile_topbar = document.querySelector(".mobile-topbar");
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`;
if (mobile_topbar) {
mobile_topbar.style.top = `${oldSidebarScrollPosition}px`;
mobile_topbar.style.position = "relative";
}
} else {
oldSidebarScrollPosition = null;
}
};
window.rustdocMobileScrollUnlock = function() {
const mobile_topbar = document.querySelector(".mobile-topbar");
if (oldSidebarScrollPosition !== null) {
// This is to keep the scroll position on mobile.
document.body.style.width = "";
document.body.style.position = "";
document.body.style.top = "";
if (mobile_topbar) {
mobile_topbar.style.top = "";
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;
}
};
function showSidebar() {
window.hideAllModals(false);
window.rustdocMobileScrollLock();
const sidebar = document.getElementsByClassName("sidebar")[0];
addClass(sidebar, "shown");
}
function hideSidebar() {
window.rustdocMobileScrollUnlock();
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();
}
if (window.CURRENT_TOOLTIP_ELEMENT) {
// As a workaround to the behavior of `contains: layout` used in doc togglers,
// tooltip popovers are positioned using javascript.