Scroll Snap

Snap scroll positions for carousels and sections

Scroll snap controls where scrolling stops. Set a snap type on the container and snap alignment on children.

Container Type

Child Alignment

Behavior

Snap horizontally when scrolling left/right

Scroll the container horizontally

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

snap-xsnap-mandatorysnap-start

Tailwind CSS

<!-- Container -->
<div class="snap-x snap-mandatory
  overflow-x-auto flex gap-3">

  <!-- Children -->
  <div class="snap-start shrink-0 w-36">
    Card 1
  </div>
  <div class="snap-start shrink-0 w-36">
    Card 2
  </div>
</div>

33 / 35