patterncssTip

CSS scroll-snap for controlled scroll experiences

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

scroll-snapcarouselsnapscroll-snap-typescroll-snap-alignfull-page scroll

Problem

Building carousels or full-page scroll experiences requires JavaScript scroll event listeners and complex math to snap to items, leading to janky behavior.

Solution

Use CSS scroll-snap to declaratively control scroll stopping points:

/* Scroll container */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* or 'proximity' for softer snap */
  -webkit-overflow-scrolling: touch;
  gap: 1rem;
  scroll-padding: 1rem; /* offset snap point from edge */
}

/* Snap children */
.carousel__item {
  flex: 0 0 100%;
  scroll-snap-align: start; /* or center, end */
}

/* Full-page vertical scroll */
.page-sections {
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

.section {
  height: 100dvh;
  scroll-snap-align: start;
}

Why

scroll-snap-type on the container defines the snap axis and strictness. scroll-snap-align on children defines where the snap point is on each item. The browser handles the physics natively, resulting in smooth, performant snapping.

Gotchas

mandatory snapping can trap users if items are shorter than the container — prefer proximity in those cases.
scroll-padding on the container offsets snap points, useful when a sticky header overlaps content.
overscroll-behavior: contain on the scroll container prevents scroll chaining to parent containers.
JavaScript's scrollIntoView({ behavior: 'smooth' }) respects snap points.

Context

Image carousels, full-page sections, or any scroll-based navigation.

Revisions (0)

No revisions yet.