The scroll-snap-type
CSS property defines how strictly snap points are enforced on the scroll container in case there is one.
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;
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | interactive |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
none
x
y
block
inline
both
mandatory
proximity
none | [ x | y | block | inline | both ] [ mandatory | proximity ]
<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>
/* 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: 256px; } /* 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; }
Specification | Status | Comment |
---|---|---|
CSS Scroll Snap Module Level 1 The definition of 'scroll-snap-type' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 69 | 12
|
39
|
10
|
56 | 11
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 69 | 69 | 12
|
46
|
56 | 11
|
No |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type