Some content is a river—you let readers flow through it. Some content is a slideshow wearing a webpage costume: onboarding steps, product galleries, portfolio pieces, data stories. For those, free scrolling leaves users stranded between sections, half a headline at the top of the screen, half an image at the bottom.

Scroll snapping adds physics to the pause. The user still owns the scroll; the browser just settles it onto meaningful resting points.

The whole API is four lines

.story {
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.chapter {
  scroll-snap-align: start;
  min-height: 100dvh;
}

The keyword that needs respect is mandatory: it guarantees the view always rests on a snap point—and becomes hostile the moment a chapter can be taller than the viewport, because content in the middle becomes unreachable. If content height is not strictly controlled, use proximity, which only snaps when the user stops near a boundary.

“Mandatory snapping is a promise that every chapter fits. Break the promise and you break the page.”

The horizontal cousin

The same four lines with x mandatory plus scroll-snap-stop: always build carousels with momentum, touch support, and accessibility that JavaScript sliders spent a decade approximating. Add scroll-behavior: smooth for anchor jumps, pair with animation-timeline: view() so each chapter animates as it arrives, and full-bleed storytelling becomes a CSS-only genre. Use it for stories; never for documents.