CSS Scroll Snap

Introduction

CSS Scroll Snap gives you fine-grained control over scroll positions, creating snapping points that elements align to when scrolling stops. Think carousels, galleries, and paginated sections — all without JavaScript.

Before scroll snap, smooth scrolling required complex JavaScript and touch handling. Now a few CSS properties give you native, performant, accessible scrolling.

The scroll container defines snapping rules, children define where to snap.

Key Concepts

Container and Child Properties

css

.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
}

.carousel__slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

Snap Types

css

.gallery { scroll-snap-type: x mandatory; }
.feed { scroll-snap-type: y proximity; }
.grid-scroller { scroll-snap-type: both mandatory; }

Practical Examples

1. Full-Width Carousel

css

.carousel {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

.carousel__slide {
  scroll-snap-align: center;
  flex: 0 0 100%;
  scroll-snap-stop: always;
}

2. Vertical Page Sections

css

html { scroll-snap-type: y proximity; }
section {
  scroll-snap-align: start;
  min-height: 100vh;
  scroll-margin-top: 4rem;
}

3. Card Peek Carousel

css

.cards {
  scroll-snap-type: x mandatory;
  overflow-x: auto;
  display: flex;
  gap: 1rem;
  padding: 0 1rem;
}
.card {
  scroll-snap-align: start;
  flex: 0 0 calc(85% - 0.5rem);
}

Best Practices

Use mandatory for carousels; proximity for long-scrolling content.
Add scroll-snap-stop: always to prevent skipping.
Use scroll-margin/scroll-padding for sticky headers.
Combine with overscroll-behavior: contain.
Test keyboard navigation (Tab, arrow keys).

Common Pitfalls

mandatory on long pages feels stuck.
Missing scroll-padding with fixed headers.
No scroll-snap-stop: always on critical slides.
Hiding scrollbars without alternative navigation for accessibility.

Browser Support

Chrome 69+, Safari 11+, Firefox 68+, Edge 79+. ~96% support.

CSS Flexbox Guide — flex layouts for scroll containers
CSS Animation & Keyframes — animate snap transitions
JavaScript Performance Tips — when to enhance scroll snap with JS