Demo of Scroll Snap

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.

<!-- 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>

.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;
}

See the Pen Testing CSS3 Scroll Snap by Thomas Seng Hin Mak (@makzan) on CodePen.

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

https://s.codepen.io/makzan/debug/EzrYXv