Home/ Layout/ Scroll snap

CSS Scroll Snap: scroll-snap-type and scroll-snap-align

Scroll snapping without a carousel library

Carousels used to mean Slick, Swiper, or custom scroll math. CSS scroll snap gives you card-by-card or full-width snapping with a few properties.

The old hack vs the modern fix
Old way 12+ lines 
// carousel.js + Slick/Swiperimport Swiper from 'swiper';new Swiper('.carousel', {  slidesPerView: 1,  loop: true});
6 lines 
.carousel   {  scroll-snap-type: x mandatory;  overflow-x: auto;  display: flex;  gap: 1rem;}.carousel > *   {  scroll-snap-align: start;}

scroll snap Browser Support

Widely available Since 2020 96% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

Safe to use without fallbacks.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →
69+
68+
11+
79+
Live Demo: scroll horizontally to snap
scroll horizontally to snap
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
scroll-snap-type: x mandatory
Why the modern way wins

No library

No Slick, Swiper, or custom scroll math. Just CSS on a scroll container.

Native touch

Touch and trackpad scrolling work out of the box. No touchstart handlers.

Accessible

Real overflow scroll, so keyboard and screen readers get normal scroll behavior.

Lines Saved
12+ → 6
No JS dependency
Old Approach
JS carousel lib
Slick, Swiper, touch handlers
Modern Approach
scroll-snap CSS
Native snapping

How it works

Carousels were usually built with a JS library that handled scroll position, touch events, and snap calculations. You paid in bundle size and maintenance.

scroll-snap-type: x mandatory on a scroll container plus scroll-snap-align: start (or center) on each item gives you snapping. Use overflow-x: auto and flex/grid for the layout. No JS.

ESC
↑↓ navigate ↵ open esc close