CSS scroll-snap-type

The scroll-snap-type property turns a scroll container into a snap container. It defines the snap axis and whether snapping is strict or only used when close to a snap point.

Syntax

scroll-snap-type: none;
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

Example

.scroller {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.slide { scroll-snap-align: start; }

Result:

Slide 1

Slide 2

Slide 3

Common mistake

mandatory and proximity are not complete values by themselves in normal use. Include the axis: x, y, block, inline or both.