Motion

scroll-snap-type

Setting how strictly snap points are enforced on the scroll container.

Class	Declarations
`snap-x`	`scroll-snap-type: x;`
`snap-y`	`scroll-snap-type: y;`
`snap-both`	`scroll-snap-type: both;`
`snap-block`	`scroll-snap-type: block;`
`snap-inline`	`scroll-snap-type: inline;`
`scroll-snap-type:x\|mandatory`	`scroll-snap-type: x mandatory;`
`scroll-snap-type:y\|proximity`	`scroll-snap-type: y proximity;`
`scroll-snap-type:both\|mandatory`	`scroll-snap-type: both mandatory;`
`scroll-snap-type:none`	`scroll-snap-type: none;`
`scroll-snap-type:<value>`	`scroll-snap-type: <value>;`

Examples

Use snap-x on a horizontal scroll container. Add snap alignment to the children.

<div class="overflow-x:auto snap-x">    <article class="snap-start">One</article></div>

Generated CSS

@layer utilities {    .snap-x {        scroll-snap-type: x    }}

Use scroll-snap-type:*|mandatory when the container must settle on a snap point after scrolling.

<div class="overflow-y:auto scroll-snap-type:y|mandatory">    <section class="snap-start">Step</section></div>

Use proximity when snapping should help alignment without taking over every scroll gesture.

<div class="overflow-x:auto scroll-snap-type:x|proximity">    ...</div>

Apply styles based on different states using selectors and conditional queries.

<div class="snap-x scroll-snap-type:y|mandatory@sm scroll-snap-type:none@print">...</div>

Setting whether scroll container is pass over snap positions.

Controlling animation speed when changing CSS properties.