📡 You're offline — showing cached content
New version available!
Quick Access
Tutorials CSS Mastery CSS Scroll Snap

CSS Scroll Snap

5 min read
CSS Scroll Snap creates snapping scroll experiences. Set scroll-snap-type: x mandatory on the container and scroll-snap-align: start on each item. Perfect for carousels and full-page scroll without any JavaScript.

Scroll Snap

.slider {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    gap: 16px;
    scroll-behavior: smooth;
}

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

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