The scroll-snap-align
property specifies the box’s snap position as an alignment of its snap area (as the alignment subject) within its snap container’s snapport (as the alignment container). The two values specify the snapping alignment in the block axis and inline axis, respectively. If only one value is specified, the second value defaults to the same value.
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | per grammar |
/* Keyword values */ scroll-snap-align: none; scroll-snap-align: start end; /* when two values set first is block, second inline */ scroll-snap-align: center; /* Global values */ scroll-snap-align: inherit; scroll-snap-align: initial; scroll-snap-align: unset;
none
start
end
center
[ none | start | end | center ]{1,2}
Safari currently has the two value syntax in the wrong order, the first value being inline the second block. See bug #191865.
Specification | Status | Comment |
---|---|---|
CSS Scroll Snap Module Level 1 The definition of 'scroll-snap-align' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 69 | No | No | No | 56 | 11 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 69 | 69 | No | No | 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-align