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
.carousel {
scroll-snap-type: x mandatory;
overflow-x: auto;
display: flex;
}
.carousel__slide {
scroll-snap-align: start;
flex: 0 0 100%;
}
Snap Types
.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
.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
html { scroll-snap-type: y proximity; }
section {
scroll-snap-align: start;
min-height: 100vh;
scroll-margin-top: 4rem;
}
3. Card Peek Carousel
.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.
Related Guides
- CSS Flexbox Guide — flex layouts for scroll containers
- CSS Animation & Keyframes — animate snap transitions
- JavaScript Performance Tips — when to enhance scroll snap with JS