Use scroll-padding-top to position anchors correctly in the viewport

This (fairly new) CSS attribute gets browsers that support it perfectly set up to skip the top nav bar. Unfortunately, Safari (both macOS and iOS) don't support it for this purpose yet, so we work around them in JS.
rust-lang · Jul 13, 2020 · d2080e8 · d2080e8
1 parent 78d62bb
commit d2080e8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/templates/rustdoc/page.html b/templates/rustdoc/page.html
@@ -31,20 +31,34 @@
     </body>
 
     <script>
-        var doc_body = document.getElementById("rustdoc_body_wrapper");
+      // Reset the scroll offset on browsers that don't support
+      // scroll-padding-top (Desktop & Mobile Safari):
+      const maybeFixupViewPortPosition = function() {
         if (window.location.hash) {
-            var notFirefox = typeof InstallTrigger === 'undefined';
-            if (notFirefox) {
-                var hash = window.location.hash;
-                window.location.hash = "";
-                setTimeout(function () {
-                    window.location.hash = hash;
-                    doc_body.focus();
-                }, 1);
-            }
-        } else {
-            doc_body.focus();
+          const anchorElement = document.getElementById(window.location.hash.substr(1));
+          const navBarHeight = document.getElementsByClassName("nav-container-rustdoc")[0].offsetHeight;
+          if (anchorElement &&
+              anchorElement.getBoundingClientRect().top <= navBarHeight &&
+              Math.abs(anchorElement.getBoundingClientRect().top) >= 0) {
+            // It's just overlapped by the nav bar. This can't be a coincidence, scroll it into view:
+            requestAnimationFrame(function() {
+              scrollBy(0, -navBarHeight);
+            });
+          }
         }
+      };
+      window.addEventListener("hashchange", maybeFixupViewPortPosition, false);
+      // Fix up the scroll position if this was a direct visit to the page
+      // (not back/forward navigation):
+      if (window.performance) {
+        const navEntries = window.performance.getEntriesByType('navigation');
+        const usedBack = navEntries.length > 0 && navEntries[0].type === 'back_forward' ||
+              (window.performance.navigation &&
+               window.performance.navigation.type == window.performance.navigation.TYPE_BACK_FORWARD);
+        if (!usedBack && window.location.hash) {
+          window.addEventListener("scroll", maybeFixupViewPortPosition, {"once": true});
+        }
+      }
     </script>
 
 </html>
diff --git a/templates/style.scss b/templates/style.scss
@@ -92,6 +92,18 @@ body {
     margin: 0;
     // Since top navbar is fixed, we need to add padding to the body content.
     padding-top: $top-navbar-height;
+    // The scroll padding on the <body> is necessary for Chrome
+    // browsers for now (see
+    // https://css-tricks.com/fixed-headers-on-page-links-and-overlapping-content-oh-my/
+    // for an explanation)
+    scroll-padding-top: $top-navbar-height;
+}
+
+html {
+    // Offset anchor jump targets down by this much, so they don't
+    // overlap the top navigation bar (not supported on Desktop/Mobile
+    // Safari yet):
+    scroll-padding-top: $top-navbar-height;
 }
 
 // this is a super nasty override for help dialog in rustdocs