css - Scroll Snap

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="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.