/
🖼

Scroll-Snap

CSS
Table of contents
  • Demo

The scroll-snap CSS has updated to new syntax. Here is a demo of using the latest syntax of scroll-snap and also making it mobile friendly.

html
<!-- Using different image width to demonstrate the scroll-snal-align center -->
<div class="photo-gallery">
<img src="https://source.unsplash.com/random/500x320">
<img src="https://source.unsplash.com/random/400x320">
<img src="https://source.unsplash.com/random/300x320">
<img src="https://source.unsplash.com/random/450x320">
<img src="https://source.unsplash.com/random/400x320">
</div>
css
.photo-gallery {
width: 500px;
max-width: 100vw;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
}
.photo-gallery img {
scroll-snap-align: center;
max-width: 100vw;
height: 100%;
object-fit: cover;
}

It also works in mobile too. You may check it out in the following demo URL:

s.codepen.io/makzan/.../EzrYXv

Demo

Code Snippets & Notes by Makzan