--- /dev/null
+<html>
+ <head>
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+ <title>Scroll Snapping Examples</title>
+ <style>
+ body {
+ line-height: 1.5;
+ margin: 2em 2em;
+ padding: 0;
+ background-color: #E2E6F5;
+ }
+
+ pre {
+ padding: 1em 3em;
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ background-color: #ddd;
+ }
+
+ code {
+ font-size: 115%;
+ font-weight: bold;
+ color: #0F5426;
+ }
+
+ p > span {
+ color: #6666FF;
+ }
+
+ h1, h3, p {
+ font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+ font-size: 120%;
+ }
+
+ h1 {
+ font-size: 40px;
+ }
+
+ p {
+ font-size: 20px;
+ }
+
+ h3 {
+ font-size: 25px;
+ margin-top: 10vh;
+ }
+
+ .corner {
+ fill: black;
+ background: transparent;
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ }
+
+ .child {
+ width: 400px;
+ height: 400px;
+ position: relative;
+ background-color: #F0F0F0;
+ display: inline-block;
+ margin-right: -4px;
+ border: 1px solid black;
+ }
+
+ .label {
+ width: 200px;
+ height: 200px;
+ border-radius: 25%;
+ background-color: white;
+ margin: 100px auto 0 auto;
+ }
+
+ .label > h1 {
+ font-size: 80px;
+ padding-left: calc(50% - 22px);
+ padding-top: calc(50% - 60px);
+ }
+
+ .top-right {
+ left: 350px;
+ -ms-transform: rotate(90deg);
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ }
+
+ .bottom-left {
+ top: 350px;
+ -ms-transform: rotate(270deg);
+ -webkit-transform: rotate(270deg);
+ transform: rotate(270deg);
+ }
+
+ .bottom-right {
+ top: 350px;
+ left: 350px;
+ -ms-transform: rotate(180deg);
+ -webkit-transform: rotate(180deg);
+ transform: rotate(180deg);
+ }
+
+ .child-thin {
+ width: 300px;
+ }
+
+ .child-thin > .top-right {
+ left: 250px;
+ }
+
+ .child-thin > .bottom-right {
+ left: 250px;
+ }
+
+ .container {
+ width: 402px;
+ height: 410px;
+ overflow-x: auto;
+ overflow-y: hidden;
+ white-space: nowrap;
+ -webkit-overflow-scrolling: touch;
+ margin: 10vh auto 0 auto;
+ }
+
+ #snap-scroll-container {
+ -webkit-scroll-snap-type: mandatory;
+ scroll-snap-type: mandatory;
+ -webkit-scroll-snap-points-x: repeat(100%);
+ scroll-snap-points-x: repeat(100%);
+ }
+
+ #snap-scroll-container-coordinates {
+ -webkit-scroll-snap-type: mandatory;
+ scroll-snap-type: mandatory;
+ }
+
+ #snap-scroll-container-coordinates > .child {
+ -webkit-scroll-snap-coordinate: 0% 0%;
+ scroll-snap-coordinate: 0% 0%;
+ }
+
+ #snap-scroll-container-coordinates-centered {
+ width: 402px;
+ -webkit-scroll-snap-type: mandatory;
+ scroll-snap-type: mandatory;
+ -webkit-scroll-snap-destination: 50% 50%;
+ scroll-snap-destination: 50% 50%;
+ }
+
+ #snap-scroll-container-coordinates-centered > .child {
+ -webkit-scroll-snap-coordinate: 50% 50%;
+ scroll-snap-coordinate: 50% 50%;
+ }
+
+ .snap-destination,
+ .snap-destination-centered {
+ width: 25px;
+ height: 25px;
+ z-index: 1;
+ position: absolute;
+ }
+
+ .snap-destination {
+ margin: -10px 0 0 -10px;
+ }
+
+ .snap-destination-centered {
+ margin: 187px 0 0 187px;
+ }
+
+ .snap-point {
+ width: 25px;
+ height: 25px;
+ -ms-transform: rotate(45deg);
+ -webkit-transform: rotate(45deg);
+ transform: rotate(45deg);
+ z-index: 1;
+ position: absolute;
+ margin: -10px 0 0 -10px;
+ }
+
+ #snap-scroll-container-2D,
+ #snap-scroll-container-2D-rotated {
+ -webkit-scroll-snap-type: mandatory;
+ scroll-snap-type: mandatory;
+ -webkit-scroll-snap-destination: 50% 50%;
+ scroll-snap-destination: 50% 50%;
+ overflow: scroll;
+ width: 500px;
+ height: 500px;
+ border-radius: 50px;
+ }
+
+ #snap-scroll-container-2D > img,
+ #snap-scroll-container-2D-rotated > img {
+ -webkit-scroll-snap-coordinate: 50% 50%;
+ scroll-snap-coordinate: 50% 50%;
+ width: 400px;
+ height: 400px;
+ }
+
+ #snap-scroll-container-2D-rotated {
+ margin-top: 20vh;
+ margin-bottom: 20vh;
+ -ms-transform: rotate(30deg);
+ -webkit-transform: rotate(30deg);
+ transform: rotate(30deg);
+ }
+
+ #nasa {
+ font-size: 16px;
+ }
+ </style>
+ </head>
+
+ <body>
+ <h1>The <code>scroll-snap-*</code> Properties.</h1>
+ <p id="subtext">The following examples are overflow-scrolling <code>div</code>s. In the second, third and fourth examples, the <span>blue</span> cross represents the location of each container’s scroll snap destination.</p>
+ <!-- Normal scrolling container (no snapping) -->
+ <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
+ <div class="container">
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>1</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>2</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>3</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>4</h1></div>
+ </div>
+ </div>
+
+ <!-- Simple scroll snapping container (using repeat) -->
+ <h3>This second container shows what basic scroll snapping can do for us.</h3>
+ <div class="container" id="snap-scroll-container">
+ <img src="images/bluecross.svg" class="snap-destination"></img>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>1</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>2</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>3</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>4</h1></div>
+ </div>
+ </div>
+ <p>The CSS for the above container is:</p>
+ <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
+
+ <!-- Scroll snapping container using coordinates -->
+ <h3>This next container snaps to elements of different sizes when scrolling.</h3>
+ <div class="container" id="snap-scroll-container-coordinates">
+ <img src="images/bluecross.svg" class="snap-destination"></img>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>1</h1></div>
+ </div>
+ <div class="child child-thin">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>2</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>3</h1></div>
+ </div>
+ <div class="child child-thin">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>4</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>5</h1></div>
+ </div>
+ <div class="child child-thin">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>6</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>7</h1></div>
+ </div>
+ </div>
+ <p>The CSS for the above container is:</p>
+ <pre>-webkit-scroll-snap-type: mandatory;</pre>
+ <p>The CSS for each of the container’s children is:</p>
+ <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
+
+ <!-- Centered scroll snapping container using coordinates -->
+ <h3>Here, we snap elements of different sizes to the center of the container.</h3>
+ <div class="container" id="snap-scroll-container-coordinates-centered">
+ <img src="images/bluecross.svg" class="snap-destination-centered"></img>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>1</h1></div>
+ </div>
+ <div class="child child-thin">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>2</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>3</h1></div>
+ </div>
+ <div class="child child-thin">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>4</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>5</h1></div>
+ </div>
+ <div class="child child-thin">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>6</h1></div>
+ </div>
+ <div class="child">
+ <img class="corner top-left" src="images/corner.svg"></img>
+ <img class="corner top-right" src="images/corner.svg"></img>
+ <img class="corner bottom-left" src="images/corner.svg"></img>
+ <img class="corner bottom-right" src="images/corner.svg"></img>
+ <div class="label"><h1>7</h1></div>
+ </div>
+ </div>
+ <p>The CSS for the above container is:</p>
+ <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+ <p>The CSS for each of the container’s children is:</p>
+ <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+ <!-- Centered scroll snapping container in 2D -->
+ <h3>This container shows centered scroll snapping in a 2D grid.</h3>
+ <div class="container" id="snap-scroll-container-2D">
+ <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
+ <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
+ <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
+ <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
+ </div>
+ <p>The CSS for the above container is:</p>
+ <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
+ <p>The CSS for each of the container’s children is:</p>
+ <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+ <!-- Centered scroll snapping container in 2D, rotated -->
+ <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
+ <div class="container" id="snap-scroll-container-2D-rotated">
+ <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
+ <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
+ <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
+ <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
+ </div>
+ <p>The CSS for the above container is:</p>
+ <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
+ <p>The CSS for each of the container’s children is:</p>
+ <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
+
+ <p id="nasa">Images from <a target="_blank" href="https://www.nasa.gov/multimedia/imagegallery/iotd.html">NASA’s image of the day gallery</a>.</p>
+ </body>
+</html>