The scroll-snap-type
CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
Specifying any precise animations or physics used to enforce those snap points is not covered by this property but instead left up to the user agent.
/* Keyword values */ scroll-snap-type: none; scroll-snap-type: x; scroll-snap-type: y; scroll-snap-type: block; scroll-snap-type: inline; scroll-snap-type: both; /* Optional mandatory | proximity*/ scroll-snap-type: x mandatory; scroll-snap-type: y proximity; scroll-snap-type: both mandatory; /* etc */ /* Global values */ scroll-snap-type: inherit; scroll-snap-type: initial; scroll-snap-type: unset;
Syntax
Values
none
- When the visual viewport of this scroll container is scrolled, it must ignore snap points.
x
- The scroll container snaps to snap positions in its horizontal axis only.
y
- The scroll container snaps to snap positions in its vertical axis only.
block
- The scroll container snaps to snap positions in its block axis only.
inline
- The scroll container snaps to snap positions in its inline axis only.
both
- The scroll container snaps to snap positions in both of its axes independently (potentially snapping to different elements in each axis).
mandatory
- The visual viewport of this scroll container will rest on a snap point if it isn't currently scrolled. That means it snaps on that point when the scroll action finished, if possible. If content is added, moved, deleted or resized the scroll offset will be adjusted to maintain the resting on that snap point.
proximity
- The visual viewport of this scroll container may come to rest on a snap point if it isn't currently scrolled considering the user agent's scroll parameters. If content is added, moved, deleted or resized the scroll offset may be adjusted to maintain the resting on that snap point.
Formal definition
Initial value | none
|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
Formal syntax
none | [ x | y | block | inline | both ] [ mandatory | proximity ]?
Examples
Snapping in different axes
HTML
<div class="holster">
<div class="container x mandatory-scroll-snapping" dir="ltr">
<div>X Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x proximity-scroll-snapping" dir="ltr">
<div>X Prox. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="ltr">
<div>Y Mand. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="ltr">
<div>Y Prox. LTR</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x mandatory-scroll-snapping" dir="rtl">
<div>X Mand. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container x proximity-scroll-snapping" dir="rtl">
<div>X Prox. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y mandatory-scroll-snapping" dir="rtl">
<div>Y Mand. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<div class="container y proximity-scroll-snapping" dir="rtl">
<div>Y Prox. RTL</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</div>
CSS
/* setup */
html, body, .holster {
height: 100%;
}
.holster {
display: flex;
align-items: center;
justify-content: space-between;
flex-flow: column nowrap;
font-family: monospace;
}
.container {
display: flex;
overflow: auto;
outline: 1px dashed lightgray;
flex: none;
}
.container.x {
width: 100%;
height: 128px;
flex-flow: row nowrap;
}
.container.y {
width: 256px;
height: 256px;
flex-flow: column nowrap;
}
/* scroll-snap */
.x.mandatory-scroll-snapping {
scroll-snap-type: x mandatory;
}
.y.mandatory-scroll-snapping {
scroll-snap-type: y mandatory;
}
.x.proximity-scroll-snapping {
scroll-snap-type: x proximity;
}
.y.proximity-scroll-snapping {
scroll-snap-type: y proximity;
}
.container > div {
text-align: center;
scroll-snap-align: center;
flex: none;
}
.x.container > div {
line-height: 128px;
font-size: 64px;
width: 100%;
height: 128px;
}
.y.container > div {
line-height: 256px;
font-size: 128px;
width: 256px;
height: 100%;
}
/* appearance fixes */
.y.container > div:first-child {
line-height: 1.3;
font-size: 64px;
}
/* coloration */
.container > div:nth-child(even) {
background-color: #87EA87;
}
.container > div:nth-child(odd) {
background-color: #87CCEA;
}
Results
Specifications
Specification | Status | Comment |
---|---|---|
CSS Scroll Snap Module Level 1The definition of 'scroll-snap-type' in that specification. | Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
scroll-snap-type
|
Chrome
Full support 69 |
Edge Full support 12 Full support 12 Prefixed' Implemented with the vendor prefix: -ms- Notes' Edge supports an earlier draft of CSS Scroll Snap without axis values. |
Firefox Full support 68 Full support 68 No support 39 — 68 Notes' An earlier draft of CSS Scroll Snap without axis values. |
IE Full support 10 Full support 10 Prefixed' Implemented with the vendor prefix: -ms- Notes' Internet Explorer supports an earlier draft of CSS Scroll Snap without axis values. |
Opera
Full support 56 |
Safari Full support 11 Full support 11 Full support 9 Prefixed' Implemented with the vendor prefix: -webkit- Notes' Older Safari versions support an earlier draft of CSS Scroll Snap without axis values. |
WebView Android
Full support 69 |
Chrome Android
Full support 69 |
Firefox Android Full support 68 Full support 68 No support 39 — 68 Notes' An earlier draft of CSS Scroll Snap without axis values. |
Opera Android
Full support 48 |
Safari iOS Full support 11 Full support 11 Full support 9 Prefixed' Implemented with the vendor prefix: -webkit- Notes' Older Safari versions support an earlier draft of CSS Scroll Snap without axis values. |
Samsung Internet Android
Full support 10.0 |
Legend
- Full support
- Full support
- See implementation notes.'
- See implementation notes.
- Requires a vendor prefix or different name for use.'
- Requires a vendor prefix or different name for use.
scroll-snap-type by Mozilla Contributors is licensed under CC-BY-SA 2.5.