Motion

scroll-snap-type

Choose the axis and strictness of snapping for a scroll container.

Overview

ClassDeclarations
snap-xscroll-snap-type: x;
snap-yscroll-snap-type: y;
snap-bothscroll-snap-type: both;
snap-blockscroll-snap-type: block;
snap-inlinescroll-snap-type: inline;
scroll-snap-type:x|mandatoryscroll-snap-type: x mandatory;
scroll-snap-type:y|proximityscroll-snap-type: y proximity;
scroll-snap-type:both|mandatoryscroll-snap-type: both mandatory;
scroll-snap-type:nonescroll-snap-type: none;
scroll-snap-type:<value>scroll-snap-type: <value>;

Examples

Snap on the horizontal axis

snap-x enables horizontal snapping with proximity strictness. The child items provide the snap positions through snap-start; neither utility creates the overflowing track on its own.

Snap on the horizontal axis
Scroll the actual track. Mandatory requires an available stop; proximity leaves the browser discretion about nearby positions.
<div id="scrollport" class="flex overflow-x:auto gap-md snap-x"  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-x {    scroll-snap-type: x  }}

Require a snap point

scroll-snap-type:y|mandatory makes this vertical container settle at an available snap position after scrolling. Each panel fits the scrollport. For content taller than the viewing area, verify that readers can still reach every part.

Require a snap point
Scroll the actual track. Mandatory requires an available stop; proximity leaves the browser discretion about nearby positions.
<div id="scrollport" class="overflow-y:auto h:14rem scroll-snap-type:y|mandatory"  tabindex="0" aria-label="Vertical panels">  <section id="panel-1" class="h:14rem snap-start">Panel 1</section>  <section id="panel-2" class="h:14rem snap-start">Panel 2</section>  <section id="panel-3" class="h:14rem snap-start">Panel 3</section>  <section id="panel-4" class="h:14rem snap-start">Panel 4</section></div>
Generated CSS
@layer utilities {  .scroll-snap-type\:y\|mandatory {    scroll-snap-type: y mandatory  }}

Allow nearby snap points

proximity lets the browser snap when the scroll finishes near a candidate. The browser chooses the distance threshold; it may leave the track between positions after a shorter gesture. Drag or scroll slowly to explore that range.

Allow nearby snap points
Scroll the actual track. Mandatory requires an available stop; proximity leaves the browser discretion about nearby positions.
<div id="scrollport" class="flex overflow-x:auto gap-md scroll-snap-type:x|proximity"  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 {  .scroll-snap-type\:x\|proximity {    scroll-snap-type: x proximity  }}

Apply conditionally

Use selectors and conditional queries to apply the change only when its condition matches. This track is horizontal with proximity snapping by default. From sm, both the flex direction and the snap axis change: full-width panels form a vertical, mandatory-snapping stack.

Apply conditionally
scroll-snap-type: Apply conditionally controls
Resize to change both the track direction and snapping axis. The panels use the same responsive classes as the displayed HTML.
<div id="scrollport" class="flex overflow:auto gap-md h:14rem snap-x flex-col@sm scroll-snap-type:y|mandatory@sm"  tabindex="0" aria-label="Responsive panels">  <section id="panel-1" class="flex-shrink:0 h:14rem w:12rem snap-start w:100%@sm">Panel 1</section>  <section id="panel-2" class="flex-shrink:0 h:14rem w:12rem snap-start w:100%@sm">Panel 2</section>  <section id="panel-3" class="flex-shrink:0 h:14rem w:12rem snap-start w:100%@sm">Panel 3</section>  <section id="panel-4" class="flex-shrink:0 h:14rem w:12rem snap-start w:100%@sm">Panel 4</section></div>
Motion
scroll-snap-stop

Control whether a directional scroll can pass over an item’s snap position.

Motion
transition

Setting the properties, duration, easing and delay of CSS transitions.

© 2026 Aoyue Design LLC.MIT License
Trademark Policy