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 |
Live Demo
The container below already has horizontal snapping via sstxm. Switch the alignment class on the child cards and scroll sideways to see where each card comes to rest.
ssas — the left edge of a card lines up with the left inner edge of the container.
Class Details
ssanscroll-snap-align: none
Excludes the element from being a snap point. It is the default, so you rarely write it out, but it is useful in mixed layouts where only cover slides should snap and the body text scrolls freely.
<!-- Mixed list: only some items are snap points -->
<div class="sstym oya h40rem">
<div class="ssas h20rem">Chapter cover (snaps)</div>
<div class="ssan p2rem">Body text scrolls freely, no snapping</div>
<div class="ssas h20rem">Next chapter cover (snaps)</div>
</div>ssasscroll-snap-align: start
Aligns to the start edge of the axis: the left edge for horizontal scrolling, the top edge for vertical scrolling. This is the default choice for card carousels and section snapping.
<!-- Carousel: each card lines up with the left edge -->
<div class="sstxm df oxa gap16px">
<div class="ssas fs0 w28rem h20rem bg18181B br8px">Card 1</div>
<div class="ssas fs0 w28rem h20rem bg18181B br8px">Card 2</div>
<div class="ssas fs0 w28rem h20rem bg18181B br8px">Card 3</div>
</div>ssacscroll-snap-align: center
Aligns the center of the element with the center of the container. Great for cover-flow galleries and thumbnail strips that highlight the active item. Add container padding or scroll-padding if you want the first and last items to center too.
<!-- Cover flow: the active item sits in the middle -->
<div class="sstxm df oxa gap16px px2rem">
<div class="ssac fs0 w20rem h20rem bg18181B br8px">Photo 1</div>
<div class="ssac fs0 w20rem h20rem bg18181B br8px">Photo 2</div>
<div class="ssac fs0 w20rem h20rem bg18181B br8px">Photo 3</div>
</div>ssaescroll-snap-align: end
Aligns to the end edge: the right edge for horizontal scrolling, the bottom edge for vertical scrolling. Suits chat and timeline views where the newest item should sit at the bottom.
<!-- Chat log: the newest message lands at the bottom edge -->
<div class="sstym oya h40rem df fdc gap12px">
<div class="ssae p16px bg18181B br8px">Message 1</div>
<div class="ssae p16px bg18181B br8px">Message 2</div>
<div class="ssae p16px bg18181B br8px">Message 3</div>
</div>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="sstxm df oxa">
<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="sstxm df oxa">
<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>Practical example: story viewer with a thumbnail strip
Full-bleed ssas slides for the main view, paired with a thumbnail strip that uses ssac so the active thumbnail stays centered.
<!-- Story viewer: full-bleed slides that always land flush -->
<div class="sstxm obxc swn df oxa h100vh">
<article v-for="story in stories" class="ssas fs0 w100vw h100vh pr">
<img :src="story.image" alt="" class="w100p h100p ofc">
<div class="pa b0 l0 w100p p2rem">
<h2 class="fs2-4rem fw700 cFFFFFF">Story title</h2>
</div>
</article>
</div>
<!-- Thumbnail strip under it: centred active thumb -->
<div class="sstxm df oxa gap8px px50p">
<button class="ssac fs0 w6rem h6rem br8px bn cp"></button>
<button class="ssac fs0 w6rem h6rem br8px bn cp"></button>
</div>Pitfalls
Ignored without scroll-snap-type on the parent
scroll-snap-align does nothing on its own. The scroll container must also carry a class such as sstxm or sstym.
ssac makes the first and last items awkward
Center alignment pulls an item to the middle, but the first and last items have no scroll room left to get there. Add horizontal padding to the container or empty spacers at each end.
Alignment follows the scroll axis, not the screen
start does not always mean left. It means the start of the scroll axis: the top in vertical scrolling, and the right edge in a right-to-left horizontal container.