Skip to content

Instantly share code, notes, and snippets.

@adamschwartz

adamschwartz/scroll-overflow-proof-of-concept.html

Created September 6, 2017 19:28
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save adamschwartz/c612fc856dcadf7388ef1b94e684ff35 to your computer and use it in GitHub Desktop.
Save adamschwartz/c612fc856dcadf7388ef1b94e684ff35 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
scroll-overflow-proof-of-concept.html
<!DOCTYPE html>
<html>
<head>
<title>&shy;</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<style>
* {
box-sizing: border-box;
}
html {
font-family: Avenir, sans-serif;
background: #111;
color: #ccc;
}
body {
margin: 0;
min-height: 100vh;
background: #2e2e2e;
}
.content {
width: 30em;
padding: 2em;
margin: 0 auto;
min-height: 101vh; /* Required? */
}
.above-body {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 20em;
text-align: center;
border-radius: 2px;
top: 0;
padding: 1em;
transform: translateY(-100%);
}
.below-body {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 20em;
text-align: center;
border-radius: 2px;
bottom: 0;
padding: 1em;
transform: translateY(100%);
}
</style>
</head>
<body>
<div class="content">
<h1>Scroll overflow</h1>
<h2>Proof of concept</h2>
<p>1. Use momentum scroll to scroll past the top and bottom of the page.</p>
<p>2. Be in awe.</p>
</div>
<div class="above-body">Yo! I’m above the body.</div>
<div class="below-body">Yo! I’m below the body.</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment