scroll-snap-type

A carousel the browser drives

Caveatscroll-snap-type goes on the scroller and scroll-snap-align on every child. Set only the first and nothing snaps, with no indication that half the recipe is missing.

FallbackAdd scroll-padding matching any sticky header, or the snapped item lands underneath it. Momentum, keyboard and touch all come free, with no library involved.

.track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.track > * {
  /* the half everyone forgets */
  scroll-snap-align: start;
}

Published 4 Aug 2026