CSS Scroll Snap
Scroll the strip and toggle each setting. The difference between mandatory and proximity is hard to understand from docs alone.
Configure
scroll-snap-type
The container always snaps. Release anywhere and it jumps to the nearest snap point.
scroll-snap-align
The leading edge of each slide aligns to the leading edge of the viewport.
scroll-snap-stop
A fast swipe can skip multiple slides in one gesture.
Try scrolling slowly and releasing halfway through a slide. With mandatory it always snaps back — you can never leave a slide partially visible.
Live Preview — scroll or use arrows
1 / 5
Generated CSS
Generated CSS
scroll-snap Browser Support
Widely available
Since
2020 97% 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.
69+
68+
11+
79+