Scroll snap
Widely available since 2022-01-09 (baseline high)
CSS scroll snap controls the panning and scrolling behavior within a scroll container.
Compatibility (view on caniuse.com)
- Chrome 69 Released on 2018-09-04
- Chrome Android 69 Released on 2018-09-04
- Edge 79 Released on 2020-01-15
- Firefox 68 Released on 2019-07-09
- Firefox for Android 68 Released on 2019-07-09
- Safari 11 Released on 2017-09-19
- Safari on iOS 11 Released on 2017-09-19
MDN docs
- scroll-snap-align property
- scroll-margin-bottom property
- scroll-margin-left property
- scroll-margin-right property
- scroll-margin-top property
- scroll-padding property
- scroll-padding-bottom property
- scroll-padding-left property
- scroll-padding-right property
- scroll-padding-top property
- scroll-margin property
- scroll-margin-block property
- scroll-margin-block-end property
- scroll-margin-block-start property
- scroll-margin-inline property
- scroll-margin-inline-end property
- scroll-margin-inline-start property
- scroll-padding-block property
- scroll-padding-block-end property
- scroll-padding-block-start property
- scroll-padding-inline property
- scroll-padding-inline-end property
- scroll-padding-inline-start property
- scroll-snap-type property
- scroll-snap-stop property
Specifications
BCD data
- css.properties.scroll-snap-align
- css.properties.scroll-margin-bottom
- css.properties.scroll-margin-left
- css.properties.scroll-margin-right
- css.properties.scroll-margin-top
- css.properties.scroll-padding
- css.properties.scroll-padding-bottom
- css.properties.scroll-padding-left
- css.properties.scroll-padding-right
- css.properties.scroll-padding-top
- css.properties.scroll-margin
- css.properties.scroll-margin-block
- css.properties.scroll-margin-block-end
- css.properties.scroll-margin-block-start
- css.properties.scroll-margin-inline
- css.properties.scroll-margin-inline-end
- css.properties.scroll-margin-inline-start
- css.properties.scroll-padding-block
- css.properties.scroll-padding-block-end
- css.properties.scroll-padding-block-start
- css.properties.scroll-padding-inline
- css.properties.scroll-padding-inline-end
- css.properties.scroll-padding-inline-start
- css.properties.scroll-snap-type
- css.properties.scroll-snap-stop