Scroll Snap & Behavior

Build snap carousels and smooth-scrolling anchored pages with scroll utilities, no JavaScript carousel library required.

4 min read Level 2/5 #tailwind#scroll#layout

What you'll learn

Use snap-x and snap-mandatory with snap-start or snap-center
Use scroll-smooth and scroll-mt for anchor links
Use overscroll-contain to trap scroll inside a region

CSS scroll snap and smooth scrolling replace a lot of carousel and anchor JavaScript. Tailwind exposes every relevant property as a utility.

Snap Carousels

Put the snap behaviour on the scroll container and the snap alignment on each child:

<div class="flex gap-4 overflow-x-auto snap-x snap-mandatory">
  <div class="snap-center shrink-0 w-80 h-48 rounded-xl bg-gray-100">1</div>
  <div class="snap-center shrink-0 w-80 h-48 rounded-xl bg-gray-100">2</div>
  <div class="snap-center shrink-0 w-80 h-48 rounded-xl bg-gray-100">3</div>
</div>

snap-x snap-mandatory forces the scroll to settle on a snap point, and snap-center centers each card. shrink-0 keeps the items from collapsing so they overflow and scroll horizontally.

Smooth Anchors

scroll-smooth animates jumps to in-page anchors instead of teleporting. The catch: a sticky header overlaps the target. Reserve space with scroll-mt-*:

<html class="scroll-smooth">
  <body>
    <header class="sticky top-0 h-16">...</header>
    <section id="pricing" class="scroll-mt-24">
      Anchored content clears the sticky header
    </section>
  </body>
</html>

scroll-mt-24 adds scroll margin so the section stops below the header rather than under it.

Containing Overscroll

When a scrollable panel reaches its edge, the scroll normally chains to the page. overscroll-contain stops that:

<div class="h-64 overflow-y-auto overscroll-contain">
  Scrolling to the bottom here will not scroll the page behind it.
</div>

This is the small detail that makes modals and side panels feel solid.

The @theme Directive →