scroll-snap-stop

Setting whether scroll container is pass over snap positions.

Overview

Examples

Force a snap stop

Use snap-always on an important snap item when fast scrolling should not skip over it.

<section class="snap-start snap-always">    Required step</section>

@layer utilities {    .snap-always {        scroll-snap-stop: always    }}

Keep normal scroll momentum

Use snap-normal for ordinary items where the browser can skip a snap point during fast scrolling.

<section class="snap-start snap-normal">    Optional step</section>

Use sparingly

Reserve always for onboarding steps, paged experiences, or essential panels. Too many forced stops can make scroll feel heavy.

<section class="snap-start snap-always">    Confirm details</section>

Apply conditionally

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

<section class="snap-normal snap-always@sm snap-normal@print">...</section>