Motion
scroll-snap-align
Align an item’s snap area with the start, center, or end of its snapport.
Overview
| Class | Declarations |
|---|---|
snap-center | scroll-snap-align: center;
|
snap-end | scroll-snap-align: end;
|
snap-start | scroll-snap-align: start;
|
scroll-snap-align:none | scroll-snap-align: none;
|
scroll-snap-align:<value> | scroll-snap-align: <value>;
|
Examples
Align a snap item to the start
snap-start makes an item’s leading edge a snap position inside a snapping container. The complete track below has more content than fits in its viewport. Scroll it or choose Panel 4 to see start alignment.
Align a snap item to the start
Choose Panel 4 or scroll the track. Snap alignment determines where the selected item settles within the viewing area.
<div id="scrollport" class="flex overflow-x:auto gap-md scroll-snap-type:x|mandatory" tabindex="0" aria-label="Horizontal panels"> <article id="panel-1" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 1</article> <article id="panel-2" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 2</article> <article id="panel-3" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 3</article> <article id="panel-4" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 4</article> <article id="panel-5" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 5</article> <article id="panel-6" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 6</article></div>Generated CSS
@layer utilities { .snap-start { scroll-snap-align: start }}Center snap items
snap-center aligns the item’s center with the snapport’s center. Choose an interior item such as Panel 4: the first and last items can be constrained by the track’s scroll range.
Center snap items
Choose Panel 4 or scroll the track. Snap alignment determines where the selected item settles within the viewing area.
<div id="scrollport" class="flex overflow-x:auto gap-md scroll-snap-type:x|mandatory" tabindex="0" aria-label="Horizontal panels"> <article id="panel-1" class="flex-shrink:0 h:9rem w:12rem snap-center">Panel 1</article> <article id="panel-2" class="flex-shrink:0 h:9rem w:12rem snap-center">Panel 2</article> <article id="panel-3" class="flex-shrink:0 h:9rem w:12rem snap-center">Panel 3</article> <article id="panel-4" class="flex-shrink:0 h:9rem w:12rem snap-center">Panel 4</article> <article id="panel-5" class="flex-shrink:0 h:9rem w:12rem snap-center">Panel 5</article> <article id="panel-6" class="flex-shrink:0 h:9rem w:12rem snap-center">Panel 6</article></div>Generated CSS
@layer utilities { .snap-center { scroll-snap-align: center }}Disable item snapping
scroll-snap-align:none removes an item’s snap position. Panel 2 still occupies space in the track; The other panels remain snap candidates. Scroll across the second panel to compare the stops.
Disable item snapping
The second panel remains in the layout but supplies no snap position. The other panels keep their start-aligned stops.
<div id="scrollport" class="flex overflow-x:auto gap-md scroll-snap-type:x|mandatory" tabindex="0" aria-label="Horizontal panels"> <article id="panel-1" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 1</article> <article id="panel-2" class="flex-shrink:0 h:9rem w:12rem scroll-snap-align:none">Panel 2</article> <article id="panel-3" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 3</article> <article id="panel-4" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 4</article> <article id="panel-5" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 5</article> <article id="panel-6" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 6</article></div>Apply conditionally
Use selectors and conditional queries to apply the change only when its condition matches. The cards snap to the start by default and to the center from sm. Widen the preview and choose Panel 4 to compare the alignment.
Apply conditionally
Choose Panel 4 or scroll the track. Snap alignment determines where the selected item settles within the viewing area.
<div id="scrollport" class="flex overflow-x:auto gap-md scroll-snap-type:x|mandatory" tabindex="0" aria-label="Horizontal panels"> <article id="panel-1" class="flex-shrink:0 h:9rem w:12rem snap-start snap-center@sm">Panel 1</article> <article id="panel-2" class="flex-shrink:0 h:9rem w:12rem snap-start snap-center@sm">Panel 2</article> <article id="panel-3" class="flex-shrink:0 h:9rem w:12rem snap-start snap-center@sm">Panel 3</article> <article id="panel-4" class="flex-shrink:0 h:9rem w:12rem snap-start snap-center@sm">Panel 4</article> <article id="panel-5" class="flex-shrink:0 h:9rem w:12rem snap-start snap-center@sm">Panel 5</article> <article id="panel-6" class="flex-shrink:0 h:9rem w:12rem snap-start snap-center@sm">Panel 6</article></div>