Scroll Snap

Scroll Snap

Make a wheel "snap" to stopping points: perfect for carousels and page sections.

The two partners

1. The ROLLER has scroll-snap-type.
2. Each TARGET inside has scroll-snap-align.

.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* must stop at a snap */
}
.slide {
  scroll-snap-align: start;        /* align to line start */
  min-width: 100%;
}

scroll-snap-type

scroll-snap-type: x | y | both; proximity | mandatory

• proximity: snap only if you're close.
• mandatory: always snap (can feel jumpy, careful).

scroll-padding & margin

Add breathing room:

.carousel {
  scroll-padding: 20px;      /* like padding for snapping */
}
.slide {
  scroll-margin: 20px;       /* offset per item */
}

Axis versions

scroll-snap-stop (never skip), snap-align: start|center|end.

TL;DR

• scroll-snap-type: x proximity + scroll-snap-align: start.
• mandatory always snaps; proximity feels nicer.
• scroll-padding/scroll-margin keep space for UI.
• Core magic for horizontal carousels without JS.