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

antifuchs · Joshua Nelson · commit 731d03183d1c · 2020-07-13T19:34:36.000-04:00
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.
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
