y direction scroll snap demo

by justforuse

HTML

<div id="gallery">
  <img src="https://picsum.photos/300/300/?image=1" alt="">
  <img src="https://picsum.photos/300/300/?image=20" alt="">
  <img src="https://picsum.photos/300/300/?image=30" alt="">
  <img src="https://picsum.photos/300/300/?image=40" alt="">
  <img src="https://picsum.photos/300/300/?image=50" alt="">
  <img src="https://picsum.photos/300/300/?image=60" alt="">
  <img src="https://picsum.photos/300/300/?image=70" alt="">
</div>

CSS

body {
  margin: 0;
}

#gallery {
  height: 100vh;
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#gallery img {
  display: block;
  scroll-snap-align: start;
  width: 80vw;
  margin: 10px 0;
}