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.
/* 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
Safari currently has the two value syntax in the wrong order, the first value being inline the second block. See bug #191865.
Initial value | none |
---|---|
Applies to | all elements |
Inherited | no |
Computed value | as specified |
Animation type | discrete |
[ none | start | end | center ]{1,2}
Specification | Status | Comment |
---|---|---|
CSS Scroll Snap Module Level 1 The definition of 'scroll-snap-align' in that specification. | Candidate Recommendation | Initial definition |
Desktop | ||||||
---|---|---|---|---|---|---|
scroll-snap-align |
69 | 79 | 68 | No | 56 | 11 |
Mobile | ||||||
---|---|---|---|---|---|---|
scroll-snap-align |
69 | 69 | 68 | 48 | 11 | 10.0 |
© 2005–2020 Mozilla 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