Scroll Snap

The plain-language idea

A carousel or paginated gallery needs one core behavior: when you stop scrolling or swiping, the viewport settles cleanly on an item boundary instead of stopping halfway between two items. Historically that meant a JS carousel library: listen for scroll or touch events, calculate which item is closest, then animate the scroll position to line it up exactly. That's real work to get right, and it fights the browser's own native scrolling and momentum instead of using it.

Scroll snap is two properties working together, no JavaScript required:

• scroll-snap-type, set on the scroll container — turns snapping on for that axis (x, y, or both) and picks the strictness.
• scroll-snap-align, set on the children — marks where each child should align to when it becomes the snap target (start, center, or end).

The browser handles the rest: native touch momentum, native scrollbar dragging, native keyboard scrolling, all snapping to item boundaries automatically, using the same scrolling physics the rest of the page already has.

See it in a real thing: a horizontally snapping image gallery

.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.gallery img {
  scroll-snap-align: center;
  flex: 0 0 80%;
}

.gallery is a horizontally scrolling flex container; because of scroll-snap-type: x mandatory, any scroll gesture along the x-axis will always come to rest with one image centered, never stopped between two. Swap mandatory for proximity and the browser only snaps when the scroll naturally comes to rest near a snap point — scroll a long way past several images quickly and it won't yank you back to the nearest one, but a gentle stop close to an image boundary still snaps there.

What people usually miss

Watch out

• Scroll snap is Baseline / widely supported now for the core scroll-snap-type/scroll-snap-align pairing — it's safe to reach for as the default mechanism for this kind of UI rather than a JS library.
• It's the scrolling mechanism, not a full carousel component. Scroll snap alone gives you zero prev/next buttons, zero dot indicators, and zero built-in "announce the current slide" accessible semantics — those still need to be built, typically with real anchor links or buttons that call scrollTo/scrollIntoView, plus appropriate ARIA if it's presented as a carousel widget.
• mandatory can trap keyboard and assistive-tech scrolling in surprising ways if items are wider than the viewport or spacing is uneven — always test actual keyboard scrolling (arrow keys, Page Down) and not just mouse/touch drag.
• The snap container needs an actual scrollable overflow axis (overflow-x: auto or similar) — scroll snap properties do nothing on an element that isn't scrolling in the first place.

Why this matters in interviews

"How would you build an image carousel without a JS library?" is a real question that tests whether a candidate knows scroll snap exists as the native mechanism, and — just as important — whether they know it isn't the whole answer, since accessible carousel controls still need to be built on top of it.