scroll-snap-align
Specifies the alignment position of items during scroll snapping. ssas snaps carousel items to the start position.
Class List
| Class | CSS | Description |
|---|---|---|
ssan | scroll-snap-align: none | No snap alignment |
ssas | scroll-snap-align: start | Snap to start |
ssac | scroll-snap-align: center | Snap to center |
ssae | scroll-snap-align: end | Snap to end |
Usage Examples
scroll-snap-align is applied to child elements of the scroll container. The parent requires scroll-snap-type.
<!-- Start-aligned carousel -->
<div class="df sstxm oh">
<div class="fs0 w100p ssas">Slide 1</div>
<div class="fs0 w100p ssas">Slide 2</div>
<div class="fs0 w100p ssas">Slide 3</div>
</div>
<!-- Center-aligned gallery -->
<div class="df sstxm oh">
<div class="fs0 w80p ssac">Photo 1</div>
<div class="fs0 w80p ssac">Photo 2</div>
<div class="fs0 w80p ssac">Photo 3</div>
</div>