scroll-snap-type
Makes a scrolling container stop exactly at its children — for sliders and galleries.
Syntax
scroll-snap-type: x mandatory;Values
| Parameter | Type | Description |
|---|---|---|
| x | y | axis | The axis on which snapping works. |
| mandatory | keyword | Always stops at a snap point. |
| proximity | keyword | Snaps only when the scroll stops near a point. |
| scroll-snap-align | property | Set on the children: which edge snaps — `start`, `center` or `end`. |
Examples
A slider without JavaScript — scroll it sideways:
<style>
.slider { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; width: 240px; }
.slider img { scroll-snap-align: start; width: 200px; flex-shrink: 0; }
</style>
<div class="slider">
<img src="/media/photo-400x250.jpg" alt="">
<img src="/media/photo-400x250.jpg" alt="">
<img src="/media/photo-400x250.jpg" alt="">
</div>Notes
The property is set on the container and scroll-snap-align on its children; without both, nothing snaps.
See also
- scroll-behavior — Whether jumps to anchors and scrolling from code happen instantly or smoothly.
- overflow — What to do with content that does not fit into the element.
- scroll-margin — Extra space kept around an element when the page scrolls to it — so it does not end up under a fixed header.
Related recipes
In the tutorial
- Scrolling — Smooth scrolling with scroll-behavior, scroll-margin-top for anchors under a sticky header, a scroll-snap carousel and overscroll-behavior.