From de0a0e8139279a72ba523c6e5808809a7cf374f5 Mon Sep 17 00:00:00 2001
From: Jacob Hoffman-Andrews <github@hoffman-andrews.com>
Date: Tue, 12 Jul 2022 15:44:08 -0700
Subject: [PATCH] Prevent sidebar scrolling from moving main content

Previously, scrolling to the bottom of the sidebar and then scrolling
some more would cause the main content to start scrolling.

This fixes that by making the `<main>` element scrollable instead of
`<body>`. Now the two scrollable elements (`<nav>` and `<main>`) are
siblings rather than child and parent.
---
 src/librustdoc/html/static/css/rustdoc.css | 11 +++++++++--
 src/librustdoc/html/static/js/main.js      |  5 +++++
 src/librustdoc/html/templates/page.html    |  2 +-
 3 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 38e67c233d698..19ff2342b30b1 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -110,6 +110,7 @@ body {
 	/* Then override it with `anywhere`, which is required to make non-Safari browsers break
 	   more aggressively when we want them to. */
 	overflow-wrap: anywhere;
+	height: 100vh;
 
 	-webkit-font-feature-settings: "kern", "liga";
 	-moz-font-feature-settings: "kern", "liga";
@@ -271,6 +272,14 @@ main {
 	flex-grow: 1;
 	padding: 10px 15px 40px 45px;
 	min-width: 0;
+
+	/* main is the big scrollable element in our documents, insted of body.
+   * To make sure scrolling with spacebar and PageDown works, we initially
+   * focus it using JS. To avoid an outline indicating that focus, we set
+   * outline to none. */
+	height: 100vh;
+	overflow-y: scroll;
+	outline: none;
 }
 
 .source main {
@@ -1767,8 +1776,6 @@ details.rustdoc-toggle[open] > summary.hideme::after {
 	}
 
 	.sidebar {
-		position: fixed;
-		top: 45px;
 		/* Hide the sidebar offscreen while not in use. Doing this instead of display: none means
 		   the sidebar stays visible for screen readers, which is useful for navigation. */
 		left: -1000px;
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index 454c7f557b9bc..bcfcfc82a14bf 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -927,6 +927,11 @@ function loadCss(cssFileName) {
     onHashChange(null);
     window.addEventListener("hashchange", onHashChange);
     searchState.setup();
+
+    // In our documents, `main` is the scrollable element instead of body.
+    // To make sure scrolling with spacebar and Page Down works, we initially
+    // focus it.
+    document.getElementsByTagName("main")[0].focus()
 }());
 
 (function () {
diff --git a/src/librustdoc/html/templates/page.html b/src/librustdoc/html/templates/page.html
index cd672aadd7e93..21211f8ea5da1 100644
--- a/src/librustdoc/html/templates/page.html
+++ b/src/librustdoc/html/templates/page.html
@@ -97,7 +97,7 @@ <h2 class="location"></h2>
         </a> {#- -#}
         {{- sidebar|safe -}}
     </nav> {#- -#}
-    <main> {#- -#}
+    <main tabindex="0"> {#- -#}
         <div class="width-limiter"> {#- -#}
             <div class="sub-container"> {#- -#}
                 <a class="sub-logo-container" href="{{page.root_path|safe}}{{krate_with_trailing_slash|safe}}index.html"> {#- -#}
