diff options
| author | Michael Howell <michael@notriddle.com> | 2023-04-10 16:15:51 -0700 |
|---|---|---|
| committer | Michael Howell <michael@notriddle.com> | 2023-04-12 10:31:06 -0700 |
| commit | bb7ed64f457be500a74d53c9d12f1d0a8f7badf6 (patch) | |
| tree | 0ffb08571f4631765cef1defa0e14d7454a77ed4 /src | |
| parent | 661b33f5247debc4e0cd948caa388997e18e9cb8 (diff) | |
| download | rust-bb7ed64f457be500a74d53c9d12f1d0a8f7badf6.tar.gz rust-bb7ed64f457be500a74d53c9d12f1d0a8f7badf6.zip | |
rustdoc: use CSS `overscroll-behavior` instead of JavaScript
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.
Diffstat (limited to 'src')
| -rw-r--r-- | src/librustdoc/html/static/css/rustdoc.css | 3 | ||||
| -rw-r--r-- | src/librustdoc/html/static/js/main.js | 52 | ||||
| -rw-r--r-- | src/librustdoc/html/static/js/source-script.js | 9 |
3 files changed, 8 insertions, 56 deletions
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css index 9df19352567..6fbb4508662 100644 --- a/src/librustdoc/html/static/css/rustdoc.css +++ b/src/librustdoc/html/static/css/rustdoc.css @@ -384,6 +384,7 @@ img { font-size: 0.875rem; flex: 0 0 200px; overflow-y: scroll; + overscroll-behavior: contain; position: sticky; height: 100vh; top: 0; @@ -1531,7 +1532,7 @@ However, it's not needed with smaller screen width because the doc/code block is /* WARNING: RUSTDOC_MOBILE_BREAKPOINT MEDIA QUERY If you update this line, then you also need to update the line with the same warning -in main.js +in source-script.js */ @media (max-width: 700px) { /* When linking to an item with an `id` (for instance, by clicking a link in the sidebar, diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js index a6655663b82..6f5987e68bf 100644 --- a/src/librustdoc/html/static/js/main.js +++ b/src/librustdoc/html/static/js/main.js @@ -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. diff --git a/src/librustdoc/html/static/js/source-script.js b/src/librustdoc/html/static/js/source-script.js index 6c0f03b5bb0..9aa75517330 100644 --- a/src/librustdoc/html/static/js/source-script.js +++ b/src/librustdoc/html/static/js/source-script.js @@ -15,8 +15,13 @@ const NAME_OFFSET = 0; const DIRS_OFFSET = 1; const FILES_OFFSET = 2; +// 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 +const RUSTDOC_MOBILE_BREAKPOINT = 700; + function closeSidebarIfMobile() { - if (window.innerWidth < window.RUSTDOC_MOBILE_BREAKPOINT) { + if (window.innerWidth < RUSTDOC_MOBILE_BREAKPOINT) { updateLocalStorage("source-sidebar-show", "false"); } } @@ -69,12 +74,10 @@ function createDirEntry(elem, parent, fullPath, hasFoundFile) { function toggleSidebar() { const child = this.parentNode.children[0]; if (child.innerText === ">") { - window.rustdocMobileScrollLock(); addClass(document.documentElement, "source-sidebar-expanded"); child.innerText = "<"; updateLocalStorage("source-sidebar-show", "true"); } else { - window.rustdocMobileScrollUnlock(); removeClass(document.documentElement, "source-sidebar-expanded"); child.innerText = ">"; updateLocalStorage("source-sidebar-show", "false"); |
