CSS Scroll Snap

Create smooth, precise, and user-friendly scroll experiences with just CSS!

What is CSS Scroll Snap?

CSS Scroll Snap is a modern CSS feature that lets you create scrollable containers where the scroll position automatically "snaps" to specific points, making navigation smooth and predictable. This is especially useful for carousels, slideshows, image galleries, onboarding screens, and full-page scroll layouts.

scroll-snap-type: Sets the axis (x, y, block, inline) and the snapping behavior (mandatory or proximity) on the container.
scroll-snap-align: Defines how each child aligns to the snap point (start, center, end).
scroll-snap-stop: (Optional) Controls whether scrolling can skip snap points (normal or always).
scroll-padding & scroll-margin: Fine-tune the snap area and offset for more precise control.

Basic Syntax

/* Container */
.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

/* Children */
.snap-item {
  scroll-snap-align: center;
}

💡 Pro Tip: Use scroll-snap-type: y mandatory; for vertical snapping, and scroll-snap-align: start; for classic carousel or onboarding screens. Combine with scroll-padding for perfect alignment!

Browser Support: CSS Scroll Snap is supported in all modern browsers, but always test for your use case!

Interactive Examples

Horizontal Snap Carousel

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}
.snap-item {
  scroll-snap-align: center;
}

Vertical Snap List

.scroll-container {
  scroll-snap-type: y mandatory;
  overflow-y: auto;
  height: 18rem;
  display: flex;
  flex-direction: column;
}
.snap-item {
  scroll-snap-align: start;
}

Snap Stop (No Skipping)

One

Two

Three

Four

.scroll-container {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}
.snap-stop {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

Snap with Padding

Alpha

Beta

Gamma

.scroll-container {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 3rem;
  overflow-x: auto;
  display: flex;
}
.snap-item {
  scroll-snap-align: start;
}

Try it: Scroll horizontally or vertically in the boxes above. Each item will snap smoothly into place! Try the Snap Stop example to see how you can't skip items, and the Snap Padding example to see how the first item aligns with padding.

Modern Scroll Snap Image Gallery

City skyline with tall buildings at dusk

Forest with sunlight streaming through trees

Aerial view of winding road through green hills

Serene lake with mountains in the background

.scroll-gallery-container {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 1rem;
}
.gallery-snap-track {
  display: flex;
  gap: 1.2rem;
}
.gallery-snap-item {
  flex: 0 0 70vw;
  max-width: 32rem;
  scroll-snap-align: center;
  border-radius: 0.8rem;
  overflow: hidden;
  box-shadow: 0 0.0625rem 0.5rem #0001;
  background: #fff;
}
.gallery-snap-item img {
  width: 100%;
  height: 18rem;
  object-fit: cover;
  display: block;
}

Tip: Swipe or scroll horizontally to snap between images. This is a pure CSS, mobile-friendly image gallery!