動效

滾動停止scroll-snap-stop

Setting whether scroll container is pass over snap positions.

Examples

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>

Generated CSS

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

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>

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 styles based on different states using selectors and conditional queries.

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

Setting the scroll snap position.

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