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

  • Select an option

    Learn more about clone URLs
  • Save adamschwartz/c612fc856dcadf7388ef1b94e684ff35 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save adamschwartz/c612fc856dcadf7388ef1b94e684ff35 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. adamschwartz created this gist Sep 6, 2017.
    71 changes: 71 additions & 0 deletions scroll-overflow-proof-of-concept.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    <!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>