BASELINE NowYouCanUse.com
Widely Available Scrolling
id: scroll-snap

Scroll snap

CSS scroll snap controls the panning and scrolling behavior within a scroll container.
Baseline Status: Achieved Widely Available on Jul 15, 2022 (Cross-browser Newly Available since Jan 15, 2020).
Desktop Browser Engine Support
Google Chrome
69
Supported
Mozilla Firefox
68
Supported
Apple Safari
11
Supported
Microsoft Edge
79
Supported
Mobile Browser Engine Support
Chrome Android
69
Firefox Android
68
Safari iOS
11
Specifications and References
Specification ↗ Can I Use (css-snappoints) ↗ Feature XML ↗
MDN Browser Compat Data Keys:
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-bottom ↗ css.properties.scroll-margin-inline ↗ css.properties.scroll-margin-inline-end ↗ css.properties.scroll-margin-inline-start ↗ css.properties.scroll-margin-left ↗ css.properties.scroll-margin-right ↗ css.properties.scroll-margin-top ↗ css.properties.scroll-padding ↗ css.properties.scroll-padding-block ↗ css.properties.scroll-padding-block-end ↗ css.properties.scroll-padding-block-end.auto ↗ css.properties.scroll-padding-block-start ↗ css.properties.scroll-padding-block-start.auto ↗ css.properties.scroll-padding-block.auto ↗ css.properties.scroll-padding-bottom ↗ css.properties.scroll-padding-inline ↗ css.properties.scroll-padding-inline-end ↗ css.properties.scroll-padding-inline-end.auto ↗ css.properties.scroll-padding-inline-start ↗ css.properties.scroll-padding-inline-start.auto ↗ css.properties.scroll-padding-inline.auto ↗ css.properties.scroll-padding-left ↗ css.properties.scroll-padding-right ↗ css.properties.scroll-padding-top ↗ css.properties.scroll-padding.auto ↗ css.properties.scroll-snap-align ↗ css.properties.scroll-snap-align.center ↗ css.properties.scroll-snap-align.end ↗ css.properties.scroll-snap-align.none ↗ css.properties.scroll-snap-align.start ↗ css.properties.scroll-snap-stop ↗ css.properties.scroll-snap-stop.always ↗ css.properties.scroll-snap-stop.normal ↗ css.properties.scroll-snap-type ↗ css.properties.scroll-snap-type.block ↗ css.properties.scroll-snap-type.both ↗ css.properties.scroll-snap-type.inline ↗ css.properties.scroll-snap-type.none ↗ css.properties.scroll-snap-type.x ↗ css.properties.scroll-snap-type.y ↗