📡 You're offline — showing cached content
⚡ New version available!
Quick Access
🗺️ Roadmaps 🃏 Flashcards 📚 Series 🎓 Tutorials 🗺️ My Path 🎤 Mock Interview ⚡ Cheat Code 📄 Resume Builder 🛠️ Dev Tools
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;
}