Skip to main content

CSS Scroll Snap

Create smooth, native scroll experiences with snap points for carousels, image galleries, and full-page sections.

Explanation

  • scroll-snap-type: Defines scroll snap behavior on container (mandatory or proximity).
  • scroll-snap-align: Sets which part of child elements snap to the container (start, center, end).
  • scroll-snap-stop: Controls whether scrolling can skip snap points (always or normal).
  • Provides native, performant scroll snapping without JavaScript.

Usage

To create a horizontal carousel with snap points:

/* Snap container */
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  gap: 1rem;
}

/* Snap children */
.carousel-item {
  flex: 0 0 80%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

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

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