CSS Scroll Snap is used to make scrolling snap smoothly to specific sections instead of stopping anywhere on the page. It is commonly used in sliders, image galleries, and full-screen section websites to create a smooth user experience.
1. What is Scroll Snap?
Scroll Snap allows the browser to lock the scroll position automatically to predefined points while scrolling.
2. Main Properties Used
scroll-snap-type (Container property)
Defines the direction and snapping behavior.
.scroll-container {
scroll-snap-type: y mandatory;
}
- x → horizontal scroll
- y → vertical scroll
- mandatory → must snap
- proximity → snaps softly
scroll-snap-align (Item property)
Defines where each item should snap.
.section {
scroll-snap-align: start;
}
Values: start, center, end
3. Simple Scroll Snap Example
HTML:
<div class="scroll-container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
</div>
CSS:
.scroll-container {
height: 100vh;
overflow-y: scroll;
scroll-snap-type: y mandatory;
}
.section {
height: 100vh;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
}
Each section snaps perfectly while scrolling.
4. Advantages
- Smooth and clean scrolling
- Great for full-screen websites
- No JavaScript required
- Easy to implement
- Modern web design feature
Conclusion
CSS Scroll Snap is a powerful feature for creating smooth, section-based scrolling effects using only CSS.
