Scroll Snap

Scroll-snap utilities for carousels, horizontal lists, and snap-to-position scrolling.

Horizontal Snap

Item 1

Item 2

Item 3

Item 4

Base

Class	Description
`.ui-scroll-snap`	Base class

Center Snap

Center 1

Center 2

Center 3

<!-- Snap children to center position. -->
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">Center 1</div>
  <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">Center 2</div>
  <div class="ui-snap-center ui-card ui-card--sm demo-snap-item">Center 3</div>
</div>

Vertical Snap

Section 1

Section 2

Section 3

<!-- Snap children on vertical scroll. -->
<div class="ui-snap-y" style="max-block-size: 8rem">
  <div class="ui-snap-start ui-card ui-card--sm">Section 1</div>
  <div class="ui-snap-start ui-card ui-card--sm">Section 2</div>
  <div class="ui-snap-start ui-card ui-card--sm">Section 3</div>
</div>

Proximity Snap

Proximity 1

Proximity 2

Proximity 3

Section 1

Section 2

Section 3

<!-- Softer snap that only engages when close to a snap point. -->
<div class="ui-snap-x-proximity ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">Proximity 1</div>
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">Proximity 2</div>
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">Proximity 3</div>
</div>
<div class="ui-snap-y-proximity" style="max-block-size: 8rem">
  <div class="ui-snap-start ui-card ui-card--sm">Section 1</div>
  <div class="ui-snap-start ui-card ui-card--sm">Section 2</div>
  <div class="ui-snap-start ui-card ui-card--sm">Section 3</div>
</div>

End Alignment And Stop

End 1

End 2

End 3

Always 1

Always 2

Always 3

<!-- Snap children to end position or force stop at every snap point. -->
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">End 1</div>
  <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">End 2</div>
  <div class="ui-snap-end ui-card ui-card--sm demo-snap-item">End 3</div>
</div>
<div class="ui-snap-x ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">Always 1</div>
  <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">Always 2</div>
  <div class="ui-snap-start ui-snap-always ui-card ui-card--sm demo-snap-item">Always 3</div>
</div>

Disable Snap

No snap 1

No snap 2

<!-- Remove snap behavior from a container. -->
<div class="ui-snap-none ui-flex ui-gap-2 ui-p-2 demo-narrow ui-overflow-x-auto">
  <div class="ui-card ui-card--sm demo-snap-item">No snap 1</div>
  <div class="ui-card ui-card--sm demo-snap-item">No snap 2</div>
</div>

Scroll Padding

p-1

p-2

p-4

<!-- Offset snap position for fixed headers or insets. -->
<div class="ui-snap-x ui-snap-p-1 ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">p-1</div>
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">p-1</div>
</div>
<div class="ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">p-2</div>
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">p-2</div>
</div>
<div class="ui-snap-x ui-snap-p-4 ui-flex ui-gap-2 ui-p-2 demo-narrow">
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">p-4</div>
  <div class="ui-snap-start ui-card ui-card--sm demo-snap-item">p-4</div>
</div>