3 <meta name="viewport" content="width=device-width,initial-scale=1">
4 <title>Scroll Snapping Examples</title>
10 background-color: #E2E6F5;
15 border: 1px solid #ccc;
17 background-color: #ddd;
31 font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
50 background: transparent;
60 background-color: #F0F0F0;
61 display: inline-block;
63 border: 1px solid black;
70 background-color: white;
71 margin: 100px auto 0 auto;
76 padding-left: calc(50% - 22px);
77 padding-top: calc(50% - 60px);
82 -ms-transform: rotate(90deg);
83 -webkit-transform: rotate(90deg);
84 transform: rotate(90deg);
89 -ms-transform: rotate(270deg);
90 -webkit-transform: rotate(270deg);
91 transform: rotate(270deg);
97 -ms-transform: rotate(180deg);
98 -webkit-transform: rotate(180deg);
99 transform: rotate(180deg);
106 .child-thin > .top-right {
110 .child-thin > .bottom-right {
120 -webkit-overflow-scrolling: touch;
121 margin: 10vh auto 0 auto;
124 #snap-scroll-container {
125 -webkit-scroll-snap-type: mandatory;
126 scroll-snap-type: mandatory;
127 -webkit-scroll-snap-points-x: repeat(100%);
128 scroll-snap-points-x: repeat(100%);
131 #snap-scroll-container-coordinates {
132 -webkit-scroll-snap-type: mandatory;
133 scroll-snap-type: mandatory;
136 #snap-scroll-container-coordinates > .child {
137 -webkit-scroll-snap-coordinate: 0% 0%;
138 scroll-snap-coordinate: 0% 0%;
141 #snap-scroll-container-coordinates-centered {
143 -webkit-scroll-snap-type: mandatory;
144 scroll-snap-type: mandatory;
145 -webkit-scroll-snap-destination: 50% 50%;
146 scroll-snap-destination: 50% 50%;
149 #snap-scroll-container-coordinates-centered > .child {
150 -webkit-scroll-snap-coordinate: 50% 50%;
151 scroll-snap-coordinate: 50% 50%;
155 .snap-destination-centered {
163 margin: -10px 0 0 -10px;
166 .snap-destination-centered {
167 margin: 187px 0 0 187px;
173 -ms-transform: rotate(45deg);
174 -webkit-transform: rotate(45deg);
175 transform: rotate(45deg);
178 margin: -10px 0 0 -10px;
181 #snap-scroll-container-2D,
182 #snap-scroll-container-2D-rotated {
183 -webkit-scroll-snap-type: mandatory;
184 scroll-snap-type: mandatory;
185 -webkit-scroll-snap-destination: 50% 50%;
186 scroll-snap-destination: 50% 50%;
193 #snap-scroll-container-2D > img,
194 #snap-scroll-container-2D-rotated > img {
195 -webkit-scroll-snap-coordinate: 50% 50%;
196 scroll-snap-coordinate: 50% 50%;
201 #snap-scroll-container-2D-rotated {
204 -ms-transform: rotate(30deg);
205 -webkit-transform: rotate(30deg);
206 transform: rotate(30deg);
216 <h1>The <code>scroll-snap-*</code> Properties.</h1>
217 <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>
218 <!-- Normal scrolling container (no snapping) -->
219 <a name="scroll-normal"></a>
220 <h3 style="margin-top: 5vh;">This first container does not have any scroll snapping behavior.</h3>
221 <div class="container">
223 <img class="corner top-left" src="images/corner.svg"></img>
224 <img class="corner top-right" src="images/corner.svg"></img>
225 <img class="corner bottom-left" src="images/corner.svg"></img>
226 <img class="corner bottom-right" src="images/corner.svg"></img>
227 <div class="label"><h1>1</h1></div>
230 <img class="corner top-left" src="images/corner.svg"></img>
231 <img class="corner top-right" src="images/corner.svg"></img>
232 <img class="corner bottom-left" src="images/corner.svg"></img>
233 <img class="corner bottom-right" src="images/corner.svg"></img>
234 <div class="label"><h1>2</h1></div>
237 <img class="corner top-left" src="images/corner.svg"></img>
238 <img class="corner top-right" src="images/corner.svg"></img>
239 <img class="corner bottom-left" src="images/corner.svg"></img>
240 <img class="corner bottom-right" src="images/corner.svg"></img>
241 <div class="label"><h1>3</h1></div>
244 <img class="corner top-left" src="images/corner.svg"></img>
245 <img class="corner top-right" src="images/corner.svg"></img>
246 <img class="corner bottom-left" src="images/corner.svg"></img>
247 <img class="corner bottom-right" src="images/corner.svg"></img>
248 <div class="label"><h1>4</h1></div>
252 <!-- Simple scroll snapping container (using repeat) -->
253 <a name="scroll-snap-1"></a>
254 <h3>This second container shows what basic scroll snapping can do for us.</h3>
255 <div class="container" id="snap-scroll-container">
256 <img src="images/bluecross.svg" class="snap-destination"></img>
258 <img class="corner top-left" src="images/corner.svg"></img>
259 <img class="corner top-right" src="images/corner.svg"></img>
260 <img class="corner bottom-left" src="images/corner.svg"></img>
261 <img class="corner bottom-right" src="images/corner.svg"></img>
262 <div class="label"><h1>1</h1></div>
265 <img class="corner top-left" src="images/corner.svg"></img>
266 <img class="corner top-right" src="images/corner.svg"></img>
267 <img class="corner bottom-left" src="images/corner.svg"></img>
268 <img class="corner bottom-right" src="images/corner.svg"></img>
269 <div class="label"><h1>2</h1></div>
272 <img class="corner top-left" src="images/corner.svg"></img>
273 <img class="corner top-right" src="images/corner.svg"></img>
274 <img class="corner bottom-left" src="images/corner.svg"></img>
275 <img class="corner bottom-right" src="images/corner.svg"></img>
276 <div class="label"><h1>3</h1></div>
279 <img class="corner top-left" src="images/corner.svg"></img>
280 <img class="corner top-right" src="images/corner.svg"></img>
281 <img class="corner bottom-left" src="images/corner.svg"></img>
282 <img class="corner bottom-right" src="images/corner.svg"></img>
283 <div class="label"><h1>4</h1></div>
286 <p>The CSS for the above container is:</p>
287 <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-points-x: repeat(100%);</pre>
289 <!-- Scroll snapping container using coordinates -->
290 <a name="scroll-snap-2"></a>
291 <h3>This next container snaps to elements of different sizes when scrolling.</h3>
292 <div class="container" id="snap-scroll-container-coordinates">
293 <img src="images/bluecross.svg" class="snap-destination"></img>
295 <img class="corner top-left" src="images/corner.svg"></img>
296 <img class="corner top-right" src="images/corner.svg"></img>
297 <img class="corner bottom-left" src="images/corner.svg"></img>
298 <img class="corner bottom-right" src="images/corner.svg"></img>
299 <div class="label"><h1>1</h1></div>
301 <div class="child child-thin">
302 <img class="corner top-left" src="images/corner.svg"></img>
303 <img class="corner top-right" src="images/corner.svg"></img>
304 <img class="corner bottom-left" src="images/corner.svg"></img>
305 <img class="corner bottom-right" src="images/corner.svg"></img>
306 <div class="label"><h1>2</h1></div>
309 <img class="corner top-left" src="images/corner.svg"></img>
310 <img class="corner top-right" src="images/corner.svg"></img>
311 <img class="corner bottom-left" src="images/corner.svg"></img>
312 <img class="corner bottom-right" src="images/corner.svg"></img>
313 <div class="label"><h1>3</h1></div>
315 <div class="child child-thin">
316 <img class="corner top-left" src="images/corner.svg"></img>
317 <img class="corner top-right" src="images/corner.svg"></img>
318 <img class="corner bottom-left" src="images/corner.svg"></img>
319 <img class="corner bottom-right" src="images/corner.svg"></img>
320 <div class="label"><h1>4</h1></div>
323 <img class="corner top-left" src="images/corner.svg"></img>
324 <img class="corner top-right" src="images/corner.svg"></img>
325 <img class="corner bottom-left" src="images/corner.svg"></img>
326 <img class="corner bottom-right" src="images/corner.svg"></img>
327 <div class="label"><h1>5</h1></div>
329 <div class="child child-thin">
330 <img class="corner top-left" src="images/corner.svg"></img>
331 <img class="corner top-right" src="images/corner.svg"></img>
332 <img class="corner bottom-left" src="images/corner.svg"></img>
333 <img class="corner bottom-right" src="images/corner.svg"></img>
334 <div class="label"><h1>6</h1></div>
337 <img class="corner top-left" src="images/corner.svg"></img>
338 <img class="corner top-right" src="images/corner.svg"></img>
339 <img class="corner bottom-left" src="images/corner.svg"></img>
340 <img class="corner bottom-right" src="images/corner.svg"></img>
341 <div class="label"><h1>7</h1></div>
344 <p>The CSS for the above container is:</p>
345 <pre>-webkit-scroll-snap-type: mandatory;</pre>
346 <p>The CSS for each of the container’s children is:</p>
347 <pre>-webkit-scroll-snap-coordinate: 0% 0%;</pre>
349 <!-- Centered scroll snapping container using coordinates -->
350 <a name="scroll-snap-3"></a>
351 <h3>Here, we snap elements of different sizes to the center of the container.</h3>
352 <div class="container" id="snap-scroll-container-coordinates-centered">
353 <img src="images/bluecross.svg" class="snap-destination-centered"></img>
355 <img class="corner top-left" src="images/corner.svg"></img>
356 <img class="corner top-right" src="images/corner.svg"></img>
357 <img class="corner bottom-left" src="images/corner.svg"></img>
358 <img class="corner bottom-right" src="images/corner.svg"></img>
359 <div class="label"><h1>1</h1></div>
361 <div class="child child-thin">
362 <img class="corner top-left" src="images/corner.svg"></img>
363 <img class="corner top-right" src="images/corner.svg"></img>
364 <img class="corner bottom-left" src="images/corner.svg"></img>
365 <img class="corner bottom-right" src="images/corner.svg"></img>
366 <div class="label"><h1>2</h1></div>
369 <img class="corner top-left" src="images/corner.svg"></img>
370 <img class="corner top-right" src="images/corner.svg"></img>
371 <img class="corner bottom-left" src="images/corner.svg"></img>
372 <img class="corner bottom-right" src="images/corner.svg"></img>
373 <div class="label"><h1>3</h1></div>
375 <div class="child child-thin">
376 <img class="corner top-left" src="images/corner.svg"></img>
377 <img class="corner top-right" src="images/corner.svg"></img>
378 <img class="corner bottom-left" src="images/corner.svg"></img>
379 <img class="corner bottom-right" src="images/corner.svg"></img>
380 <div class="label"><h1>4</h1></div>
383 <img class="corner top-left" src="images/corner.svg"></img>
384 <img class="corner top-right" src="images/corner.svg"></img>
385 <img class="corner bottom-left" src="images/corner.svg"></img>
386 <img class="corner bottom-right" src="images/corner.svg"></img>
387 <div class="label"><h1>5</h1></div>
389 <div class="child child-thin">
390 <img class="corner top-left" src="images/corner.svg"></img>
391 <img class="corner top-right" src="images/corner.svg"></img>
392 <img class="corner bottom-left" src="images/corner.svg"></img>
393 <img class="corner bottom-right" src="images/corner.svg"></img>
394 <div class="label"><h1>6</h1></div>
397 <img class="corner top-left" src="images/corner.svg"></img>
398 <img class="corner top-right" src="images/corner.svg"></img>
399 <img class="corner bottom-left" src="images/corner.svg"></img>
400 <img class="corner bottom-right" src="images/corner.svg"></img>
401 <div class="label"><h1>7</h1></div>
404 <p>The CSS for the above container is:</p>
405 <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
406 <p>The CSS for each of the container’s children is:</p>
407 <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
409 <!-- Centered scroll snapping container in 2D -->
410 <a name="scroll-snap-4"></a>
411 <h3>This container shows centered scroll snapping in a 2D grid.</h3>
412 <div class="container" id="snap-scroll-container-2D">
413 <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
414 <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
415 <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
416 <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
418 <p>The CSS for the above container is:</p>
419 <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;</pre>
420 <p>The CSS for each of the container’s children is:</p>
421 <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
423 <!-- Centered scroll snapping container in 2D, rotated -->
424 <a name="scroll-snap-5"></a>
425 <h3>This example takes the 2D scroll snapping grid above and rotates it by 30 degrees.</h3>
426 <div class="container" id="snap-scroll-container-2D-rotated">
427 <img src="images/1.png"/><img src="images/2.png"/><img src="images/3.png"/><img src="images/4.png"/><br>
428 <img src="images/5.png"/><img src="images/6.png"/><img src="images/7.png"/><img src="images/8.png"/><br>
429 <img src="images/9.png"/><img src="images/10.png"/><img src="images/11.png"/><img src="images/12.png"/><br>
430 <img src="images/13.png"/><img src="images/14.png"/><img src="images/15.png"/><img src="images/16.png"/>
432 <p>The CSS for the above container is:</p>
433 <pre>-webkit-scroll-snap-type: mandatory;<br>-webkit-scroll-snap-destination: 50% 50%;<br>-webkit-transform: rotate(30deg);</pre>
434 <p>The CSS for each of the container’s children is:</p>
435 <pre>-webkit-scroll-snap-coordinate: 50% 50%;</pre>
437 <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>