Scroll snap

Also called CSS scroll snap or snap scrolling

A CSS feature that makes a scroll container settle on set points, so carousels and full-screen sections come to rest neatly on an item.

const testimonials = [
  {
    name: 'Maya Chen',
    role: 'Founder, Fieldnote',
    quote: 'We went from idea to paying customers in a weekend.'
  },
  {
    name: 'Daniel Ortiz',
    role: 'Ops lead, Northwind',
    quote: 'Our internal tools finally look like real products.'
  },
  {
    name: 'Priya Nair',
    role: 'Designer, Lumen',
    quote: 'I describe a screen and see it running a minute later.'
  },
  {
    name: 'Tom Becker',
    role: 'CTO, Parcel & Co',
    quote: 'Publishing to our own domain took one click.'
  }
];

export function TestimonialCarousel() {
  return (
    // snap-mandatory: every swipe comes to rest on a card. scroll-px-6 lines cards up with the page margin.
    <ul
      aria-label='Customer testimonials'
      className='flex snap-x snap-mandatory scroll-px-6 gap-4 overflow-x-auto overscroll-x-contain px-6 pb-4'
    >
      {testimonials.map((item) => (
        // Narrower than the row, so the next card peeks in.
        <li
          key={item.name}
          tabIndex={0}
          className='w-80 max-w-[85%] shrink-0 snap-start rounded-2xl border bg-background p-6 outline-ring focus-visible:outline-2'
        >
          <blockquote className='text-sm'>“{item.quote}”</blockquote>
          <p className='mt-4 text-sm font-medium'>{item.name}</p>
          <p className='text-sm text-muted-foreground'>{item.role}</p>
        </li>
      ))}
    </ul>
  );
}

What is Scroll snap?

Scroll snap lets the browser finish a scroll for you. Swipe a carousel and let go, and it glides to the nearest card, lined up with the edge. It works with touch, trackpads, mouse wheels, and the keyboard, and keeps the natural momentum of each device.

Two properties do the work. On the scroll container, scroll-snap-type: x mandatory turns on snapping along the horizontal axis. On each child, scroll-snap-align: start (or center) marks where it lines up. Add scroll-padding to the container when a header or page margin should stay clear.

Use mandatory for carousels and galleries where every stop should land on an item, and proximity for long pages where snapping should only kick in near a snap point. Let part of the next item peek in so people know there is more, and keep items focusable for keyboard users.

Often confused with

Carousel: A carousel is the component that shows items in a sideways row. Scroll snap is a CSS technique that makes a carousel come to rest on each item.

All terms