<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[189755] trunk/Websites/webkit.org</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/189755">189755</a></dd>
<dt>Author</dt> <dd>wenson_hsieh@apple.com</dd>
<dt>Date</dt> <dd>2015-09-14 16:21:20 -0700 (Mon, 14 Sep 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Add scroll snap demo directory and files.
* demos/scroll-snap/images/1.png: Added.
* demos/scroll-snap/images/10.png: Added.
* demos/scroll-snap/images/11.png: Added.
* demos/scroll-snap/images/12.png: Added.
* demos/scroll-snap/images/13.png: Added.
* demos/scroll-snap/images/14.png: Added.
* demos/scroll-snap/images/15.png: Added.
* demos/scroll-snap/images/16.png: Added.
* demos/scroll-snap/images/2.png: Added.
* demos/scroll-snap/images/3.png: Added.
* demos/scroll-snap/images/4.png: Added.
* demos/scroll-snap/images/5.png: Added.
* demos/scroll-snap/images/6.png: Added.
* demos/scroll-snap/images/7.png: Added.
* demos/scroll-snap/images/8.png: Added.
* demos/scroll-snap/images/9.png: Added.
* demos/scroll-snap/images/bluecross.svg: Added.
* demos/scroll-snap/images/corner.svg: Added.
* demos/scroll-snap/index.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkWebsiteswebkitorgChangeLog">trunk/Websites/webkit.org/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li>trunk/Websites/webkit.org/demos/scroll-snap/</li>
<li>trunk/Websites/webkit.org/demos/scroll-snap/images/</li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages1png">trunk/Websites/webkit.org/demos/scroll-snap/images/1.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages10png">trunk/Websites/webkit.org/demos/scroll-snap/images/10.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages11png">trunk/Websites/webkit.org/demos/scroll-snap/images/11.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages12png">trunk/Websites/webkit.org/demos/scroll-snap/images/12.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages13png">trunk/Websites/webkit.org/demos/scroll-snap/images/13.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages14png">trunk/Websites/webkit.org/demos/scroll-snap/images/14.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages15png">trunk/Websites/webkit.org/demos/scroll-snap/images/15.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages16png">trunk/Websites/webkit.org/demos/scroll-snap/images/16.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages2png">trunk/Websites/webkit.org/demos/scroll-snap/images/2.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages3png">trunk/Websites/webkit.org/demos/scroll-snap/images/3.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages4png">trunk/Websites/webkit.org/demos/scroll-snap/images/4.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages5png">trunk/Websites/webkit.org/demos/scroll-snap/images/5.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages6png">trunk/Websites/webkit.org/demos/scroll-snap/images/6.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages7png">trunk/Websites/webkit.org/demos/scroll-snap/images/7.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages8png">trunk/Websites/webkit.org/demos/scroll-snap/images/8.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimages9png">trunk/Websites/webkit.org/demos/scroll-snap/images/9.png</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimagesbluecrosssvg">trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapimagescornersvg">trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg</a></li>
<li><a href="#trunkWebsiteswebkitorgdemosscrollsnapindexhtml">trunk/Websites/webkit.org/demos/scroll-snap/index.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkWebsiteswebkitorgChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Websites/webkit.org/ChangeLog (189754 => 189755)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/ChangeLog 2015-09-14 22:40:29 UTC (rev 189754)
+++ trunk/Websites/webkit.org/ChangeLog 2015-09-14 23:21:20 UTC (rev 189755)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2015-09-14 Wenson Hsieh <wenson_hsieh@apple.com>
+
+ Add scroll snap demo directory and files.
+
+ * demos/scroll-snap/images/1.png: Added.
+ * demos/scroll-snap/images/10.png: Added.
+ * demos/scroll-snap/images/11.png: Added.
+ * demos/scroll-snap/images/12.png: Added.
+ * demos/scroll-snap/images/13.png: Added.
+ * demos/scroll-snap/images/14.png: Added.
+ * demos/scroll-snap/images/15.png: Added.
+ * demos/scroll-snap/images/16.png: Added.
+ * demos/scroll-snap/images/2.png: Added.
+ * demos/scroll-snap/images/3.png: Added.
+ * demos/scroll-snap/images/4.png: Added.
+ * demos/scroll-snap/images/5.png: Added.
+ * demos/scroll-snap/images/6.png: Added.
+ * demos/scroll-snap/images/7.png: Added.
+ * demos/scroll-snap/images/8.png: Added.
+ * demos/scroll-snap/images/9.png: Added.
+ * demos/scroll-snap/images/bluecross.svg: Added.
+ * demos/scroll-snap/images/corner.svg: Added.
+ * demos/scroll-snap/index.html: Added.
+
</ins><span class="cx"> 2015-09-03 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Added and updated assets for Introducing the Rendering Frames Timeline blog post.
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages1png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/1.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/1.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages10png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/10.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/10.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages11png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/11.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/11.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages12png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/12.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/12.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages13png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/13.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/13.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages14png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/14.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/14.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages15png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/15.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/15.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages16png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/16.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/16.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages2png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/2.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/2.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages3png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/3.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/3.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages4png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/4.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/4.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages5png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/5.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/5.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages6png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/6.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/6.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages7png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/7.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/7.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages8png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/8.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/8.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimages9png"></a>
<div class="binary"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/9.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/Websites/webkit.org/demos/scroll-snap/images/9.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimagesbluecrosssvg"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg (0 => 189755)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg (rev 0)
+++ trunk/Websites/webkit.org/demos/scroll-snap/images/bluecross.svg 2015-09-14 23:21:20 UTC (rev 189755)
</span><span class="lines">@@ -0,0 +1,3 @@
</span><ins>+<svg xmlns="http://www.w3.org/2000/svg">
+ <polygon fill="#6666FF" points="10,0 15,0 15,10 26,10 26,15 15,15 15,26 10,26 10,15 0,15 0,10 10,10"></polygon>
+</svg>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapimagescornersvg"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg (0 => 189755)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg (rev 0)
+++ trunk/Websites/webkit.org/demos/scroll-snap/images/corner.svg 2015-09-14 23:21:20 UTC (rev 189755)
</span><span class="lines">@@ -0,0 +1,3 @@
</span><ins>+<svg xmlns="http://www.w3.org/2000/svg">
+ <polygon points="0,0 50,0 50,5 5,5 5,50 0,50"></polygon>
+</svg>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkWebsiteswebkitorgdemosscrollsnapindexhtml"></a>
<div class="addfile"><h4>Added: trunk/Websites/webkit.org/demos/scroll-snap/index.html (0 => 189755)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Websites/webkit.org/demos/scroll-snap/index.html (rev 0)
+++ trunk/Websites/webkit.org/demos/scroll-snap/index.html 2015-09-14 23:21:20 UTC (rev 189755)
</span><span class="lines">@@ -0,0 +1,433 @@
</span><ins>+<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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;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&rsquo;s image of the day gallery</a>.</p>
+ </body>
+</html>
</ins></span></pre>
</div>
</div>
</body>
</html>