Defines how strictly snap points are enforced on a scroll container.
The scroll-snap-type property sets whether a scroll container is a scroll snap container, the axis on which snapping occurs, and how strictly snapping is enforced. It works in conjunction with scroll-snap-align on child elements to create smooth, controlled scrolling experiences.
The property takes an axis value (x, y, block, inline, or both) and an optional strictness value (mandatory or proximity). With mandatory, the scroll container always snaps to a snap point when scrolling finishes. With proximity, snapping only occurs when the scroll position is near a snap point.
Scroll snapping is widely used for image carousels, paginated content, full-page scroll experiences, and horizontal scrolling galleries. It provides a native alternative to JavaScript-based scroll snapping libraries.
| Name | Description | Optional |
|---|---|---|
axis |
The axis on which snapping occurs: x, y, block, inline, or both. | No |
strictness |
How strictly snap points are enforced: mandatory or proximity. | Yes |
.carousel {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
}
.carousel-item {
flex: 0 0 100%;
scroll-snap-align: start;
}