Demo of Scroll Snap

Thomas Mak wrote at 2019-06-02.


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.

Scroll Snap Result

<!-- Using different image width to demonstrate the scroll-snal-align center -->
<div class="photo-gallery">
    <img src="">
    <img src="">
    <img src="">
    <img src="">
    <img src="">
.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:


no comments yet.