What is the difference between mandatory and proximity?

scroll-snap-type: x mandatory forces the scroll to always rest on a snap point — you cannot stop between items. proximity only snaps when you release the scroll near a snap point, otherwise it stays put. Mandatory is ideal for full-screen carousels; proximity for long lists where free scrolling matters.

Which properties go on the container vs the items?

The container gets scroll-snap-type and scroll-padding. Each scrollable child item gets scroll-snap-align, scroll-snap-stop and scroll-margin. The container must also be scrollable (overflow set and a constrained size) for any snapping to occur.

What does scroll-snap-align control?

It sets which edge of the item aligns to the snap position of the container's scrollport: start aligns the item's start edge, center centres it, and end aligns its end edge. You can give two values for the block and inline axes independently.

What is scroll-snap-stop for?

scroll-snap-stop: always prevents fast flicks from skipping over a snap point — the scroll must stop on each item one at a time. The default normal lets a single fling pass several items. Use always for paginated, one-item-per-swipe interfaces.

Why use scroll-padding and scroll-margin?

scroll-padding insets the container's snap area, so items snap below a sticky header instead of underneath it. scroll-margin adds space around an individual item's snap edge. Together they position the resting point precisely without changing the visual layout.

CSS Scroll Snap Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

What CSS Scroll Snap does

Scroll Snap lets a scroll container rest on defined snap points instead of stopping anywhere. It powers carousels, paginated galleries and full-screen sections with no JavaScript. The properties split cleanly: a few go on the scroll container to define the axis and strictness, and the rest go on each scrollable item to define where it aligns. This reference lists them all with their accepted values.

How it works

The container declares an axis and strictness with scroll-snap-type; each child declares where it rests with scroll-snap-align:

.carousel {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 1rem;
}
.carousel > .slide {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scroll-margin-left: 0.5rem;
}

mandatory guarantees the scroll always lands on a slide; proximity only snaps when you release near one. scroll-snap-align: start aligns each slide’s left edge to the (padded) container edge. scroll-snap-stop: always blocks a single fling from skipping past slides.

Tips and notes

A snap container must actually scroll — set overflow and a constrained size, or nothing snaps.
Combine scroll-padding (container) with scroll-margin (item) to clear a sticky header.
Use logical-axis values block/inline for writing-mode-aware snapping.
scroll-snap-align: none opts a single item out of snapping inside a snapping container.