Scroll Snap

ELI5 — The Vibe Check

CSS Scroll Snap makes scrolling lock onto specific points — like flipping through pages or snapping to cards in a carousel. No JavaScript needed. The browser handles the physics and the snap. It's the easiest way to build a carousel that doesn't suck.

Real Talk

CSS Scroll Snap provides native scroll snapping behavior where the scroll container automatically aligns to defined snap points. The container uses scroll-snap-type for direction and strictness, while children use scroll-snap-align for positioning. It enables performant carousels and paginated scrolling without JavaScript.

Show Me The Code

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
}

.slide {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
}

When You'll Hear This

"CSS Scroll Snap gave us a mobile carousel without a single line of JavaScript" / "scroll-snap-type: mandatory forces exact snapping; proximity allows free scrolling near edges"