scroll-snap-stop
Controls whether snap points can be passed through during scrolling. Applying sssa forces a stop at each snap point even during fast scrolling.
Class List
| Class | CSS | Description |
|---|---|---|
sssn | scroll-snap-stop: normal | Default. Snap points can be skipped |
sssa | scroll-snap-stop: always | Must stop at each snap point |
Class Details
sssnscroll-snap-stop: normal
Default value. Fast scrolling can skip intermediate snap points. Use when allowing free scrolling.
<!-- Default behavior: snap points can be skipped -->
<div class="df oxa" style="scroll-snap-type: x mandatory">
<div class="sssn fs0 w100p">Slide 1</div>
<div class="sssn fs0 w100p">Slide 2</div>
<div class="sssn fs0 w100p">Slide 3</div>
</div>sssascroll-snap-stop: always
Forces a stop at each snap point even during fast scrolling. Use for carousels or onboarding slides where users must go through every item.
<!-- Stop at every slide -->
<div class="df oxa" style="scroll-snap-type: x mandatory">
<div class="sssa fs0 w100p">Must stop 1</div>
<div class="sssa fs0 w100p">Must stop 2</div>
<div class="sssa fs0 w100p">Must stop 3</div>
</div>Caution
sssa must be applied to snap child elements. Add it to individual items, not the container.
Tips & Notes
Usage in Carousels
Applying sssa in image carousels or card sliders allows users to flip one card at a time, improving UX.