Back to Examples

CSS Scroll Snap

If you searched css scroll snap or snap carousel, scroll-snap lets containers stop on defined points. Combine overflow-x auto with mandatory snap on cards or slides.

1. Horizontal snap list

Cards snap into place when scrolling sideways.

Snap row
1
2
3
4

Scroll horizontally. Each card snaps.

.scroller {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.scroller > * { scroll-snap-align: start; flex: 0 0 80%; }

2. Vertical snap sections

Full-height panels snap on vertical scroll.

Snap column
A
B

Tall container with two snap panels.

.stack {
  height: 10rem;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
}
.panel { scroll-snap-align: start; min-height: 10rem; }

3. scroll-snap-align: center

Center-aligned snaps for peeking next slide.

Center snap
A
B
C

Slides center in the viewport.

.slide { scroll-snap-align: center; }

Frequently asked questions

scroll-snap vs JS carousel?
Snap is native and lightweight; JS adds autoplay, dots, and a11y announcements.
mandatory vs proximity?
mandatory always snaps; proximity snaps only when close enough and feels looser.
iOS momentum scrolling?
Use -webkit-overflow-scrolling: touch on older iOS; snap still works.