coderef

Scroll snapBaseline · Widely available

CSS scroll snap controls the panning and scrolling behavior within a scroll container.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Jan 15, 2020. Widely available since Jul 15, 2022.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–68Not supported
69+Supportedsince Sep 4, 2018
Current: 155
Edge
12–18Not supported
79+Supportedsince Jan 15, 2020
Current: 154
Firefox
1–67Not supported
68+Supportedsince Jul 9, 2019
Current: 157
Safari
1–10.1Not supported
11+Supportedsince Sep 19, 2017
Current: 27
MobileChrome Android
18–68Not supported
69+Supportedsince Sep 4, 2018
Current: 155
Firefox Android
4–67Not supported
68+Supportedsince Jul 9, 2019
Current: 157
Safari iOS
1–10.3Not supported
11+Supportedsince Sep 19, 2017
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

CSS
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.carousel > .slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
}

Feature detection

CSS · check before using
@supports (scroll-snap-align: initial) {
  /* styles that rely on scroll-snap-align */
}

/* or in JavaScript */
if (CSS.supports("scroll-snap-align", "initial")) {
  // use it
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (44). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
scroll-margin69799014.1699014.5
scroll-margin-block69796815696815
scroll-margin-block-end69796815696815
scroll-margin-block-start69796815696815
scroll-margin-bottom69796814.1696814.5
scroll-margin-inline69796815696815
scroll-margin-inline-end69796815696815
scroll-margin-inline-start69796815696815
scroll-margin-left69796814.1696814.5
scroll-margin-right69796814.1696814.5
scroll-margin-top69796814.1696814.5
scroll-padding69796814.1696814.5
scroll-padding-block69796815696815
scroll-padding-block-end69796815696815
scroll-padding-block-end.auto69796815696815
scroll-padding-block-start69796815696815
scroll-padding-block-start.auto69796815696815
scroll-padding-block.auto69796815696815
scroll-padding-bottom69796814.1696814.5
scroll-padding-inline69796815696815
Show 24 more
Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
scroll-padding-inline-end69796815696815
scroll-padding-inline-end.auto69796815696815
scroll-padding-inline-start69796815696815
scroll-padding-inline-start.auto69796815696815
scroll-padding-inline.auto69796815696815
scroll-padding-left69796814.1696814.5
scroll-padding-right69796814.1696814.5
scroll-padding-top69796814.1696814.5
scroll-padding.auto69796814.1696814.5
scroll-snap-align69796811696811
scroll-snap-align.center69796811696811
scroll-snap-align.end69796811696811
scroll-snap-align.none69796811696811
scroll-snap-align.start69796811696811
scroll-snap-stop7579103157510315
scroll-snap-stop.always7579103157510315
scroll-snap-stop.normal7579103157510315
scroll-snap-type69799911693911
scroll-snap-type.block69799911696811
scroll-snap-type.both69799911696811
scroll-snap-type.inline69799911696811
scroll-snap-type.none69799911693911
scroll-snap-type.x69799911696811
scroll-snap-type.y69799911696811