Skip to content

Instantly share code, notes, and snippets.

@emir
Last active April 28, 2019 16:25
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save emir/e44fe8fa88324f8e7b2d2171075354df to your computer and use it in GitHub Desktop.
Save emir/e44fe8fa88324f8e7b2d2171075354df to your computer and use it in GitHub Desktop.
<div id="fakeurlbar" style="display: none; position: fixed; top: 0px; left: 0; height: 74.77037037037037px; width: 100vw; background-image: url('{% link assets/2019-04-27/bar_background.png %}'); background-size: 19px 74.77037037037037px;">
<img src="{% link assets/2019-04-27/bar_left.png %}" style="float: left; width: 211.72222222222223px;"/>
<img src="{% link assets/2019-04-27/bar_right.png %}" style="float: right; width: 124.74444444444444px;"/>
</div>
<script>
let scrollJailEl = null;
const initialHeight = window.innerHeight;
const fakeUrlBarEl = document.getElementById("fakeurlbar");
const fakeTopHeight = 1000;
document.body.appendChild(fakeUrlBarEl);
window.onresize = function() {
if (window.innerHeight > initialHeight && !scrollJailEl) {
// Chrome has given up its URL bar!
// Create the scroll jail and the fake URL bar!
const jailScrollTo = window.scrollY;
fakeUrlBarEl.style.display = "block";
document.body.style.margin = "0";
scrollJailEl = document.createElement("div");
scrollJailEl.style.position = "fixed";
scrollJailEl.style.overflowX = "scroll";
scrollJailEl.style.overflowY = "scroll";
scrollJailEl.style.width = window.innerWidth + "px";
scrollJailEl.style.height = window.innerHeight + "px";
scrollJailEl.style.top = "56px";
scrollJailEl.style.padding = "0 1em";
// create the fake top
const fakeTopEl = document.createElement("div");
fakeTopEl.style.height = fakeTopHeight + "px";
scrollJailEl.appendChild(fakeTopEl);
// move everything into the scroll jail
while (document.body.children.length > 0) {
const child = document.body.children[0];
scrollJailEl.appendChild(child);
}
document.body.appendChild(scrollJailEl);
document.body.appendChild(fakeUrlBarEl);
scrollJailEl.scrollTop = jailScrollTo + fakeTopHeight + 56;
let scroller;
scrollJailEl.onscroll = e => {
clearTimeout(scroller);
scroller = setTimeout(() => {
scrollJailEl.scrollTo({
top: Math.max(scrollJailEl.scrollTop, fakeTopHeight),
left: 0,
behavior: 'smooth'
});
}, 100);
console.log("scroll");
};
}
};
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment