Skip to content

Don't munge window.location.hash to fix scroll positions #873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jyn514 merged 2 commits into from
Jul 13, 2020
Merged

Don't munge window.location.hash to fix scroll positions #873

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
78d62bb
removed fixed
Kestrer Dec 7, 2019
d2080e8
Use scroll-padding-top to position anchors correctly in the viewport
antifuchs Jul 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 26 additions & 12 deletions templates/rustdoc/page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
21 changes: 13 additions & 8 deletions templates/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,21 +84,26 @@ div.rustdoc {
}
}

// this is actual fix for docs.rs navigation and rustdoc sidebar
position: fixed;
top: $top-navbar-height;
bottom: 0;
left: 0;
right: 0;
display: block;
overflow-y: auto;
position: relative;
}

body {
padding: 0;
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
Expand Down