Scroll Snap Type Property
Last updated: 2026-09-13
scroll-snap-type Scroll Snap Type Property
The scroll-snap-type property enables a snapping effect when scrolling, making the scroll container align specified elements to its edge or center when it stops. It is commonly used for carousels, full-screen scrolling pages, and horizontal swipe lists, making the scroll experience more precise and controlled.
| Category | |
|---|---|
| Initial Value | none |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS3 |
| Status | Standard |
📝 Syntax
scroll-snap-type: none | [ x | y | block | inline | both ] [ mandatory | proximity ];⚙️ Values
| Value | Type | Description |
|---|---|---|
none | x | y | block | inline | both | mandatory | proximity | Keyword | The scroll snap type |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| scroll-snap-type | ✓ v57 | ✓ v12 | ✓ v52 | ✓ v10.1 | ✓ v44 |
| Supported in all major browsers | |||||
Tip： mandatory always snaps to the nearest snap point; proximity snaps only when the stop position is close to a snap point — a more lenient behavior.
Tip： It must be combined with scroll-snap-align on the children to define each child's alignment position.
❓ FAQ
QDo scroll-snap-type and scroll-behavior: smooth conflict with each other?
ANo — they have different jobs and are often used together. scroll-snap-type decides where you stop: the scroll snaps to a snap point when it stops. scroll-behavior decides how you get there: with a smooth animation. Setting both, the scroll glides first and then snaps precisely — the standard combination for carousels and full-screen scrolling.
QWhy is my scroll-snap-type not snapping to the child elements?
AThe most common cause: the children are missing scroll-snap-align, so there is no snap point to catch; or the container size does not match the children, so no reachable snap position exists when scrolling stops; or the content does not overflow, so the container cannot scroll at all. Check that the container really scrolls and that children set scroll-snap-align: start/center/end.
QWhat is the difference between mandatory and proximity in scroll-snap-type?
Amandatory always snaps: when scrolling stops, it snaps to the nearest snap point even if you only moved a little. proximity snaps leniently: it only snaps when the stop position is close to a snap point, otherwise it stops freely. mandatory gives a stable feel but can make it hard to land on intermediate content; proximity is more natural and suits dense containers.
QHow good is the browser support for scroll-snap-type across devices?
ADesktop Chrome, Edge, Firefox, and Safari all support it, but Safari used the old spec for a long time, requiring the -webkit-scroll-snap-type prefix with a different syntax. Chrome 69+ and Firefox 68+ support the new spec. On mobile, iOS Safari 13+ works; for older iOS, watch the prefix differences.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
