CSS Scroll Snap: Browser Support, Properties, Limitations

What is CSS Scroll Snap?

CSS Scroll Snap is a CSS module that defines snap positions on a scroll container so its scrollport stops at chosen children instead of any pixel offset. The W3C CSS Working Group maintains the CSS Scroll Snap Module Level 1 specification. The module entry points are scroll-snap-type on the container and scroll-snap-align on each child.

Which browsers does CSS Scroll Snap support?

CSS Scroll Snap works without a vendor prefix in every modern browser, with a legacy -ms- partial implementation in Internet Explorer 10 to 11.

What are the key properties of CSS Scroll Snap?

CSS Scroll Snap pairs a container-level type declaration with per-child alignment and padding properties that control where the scrollport lands.

• scroll-snap-type: Set on the scroll container. Accepts an axis (x, y, both, block, inline) and a strictness keyword (mandatory or proximity). For example, x mandatory builds a horizontal carousel that always lands on an item.
• scroll-snap-align: Set on each child. Defines whether the child snaps by its start, center, or end edge. A 3-up gallery typically uses scroll-snap-align: start so cards align to the left edge of the viewport.
• scroll-snap-stop: Set on each child. The always value forces the container to stop on this child even during a fast flick, which is the right default for full-page pagers and onboarding flows.
• scroll-padding and scroll-padding-top / -right / -bottom / -left: Set on the container. Inset the optimal viewing region so a sticky header or fixed nav does not cover the snapped child.
• scroll-margin and scroll-margin-top / -right / -bottom / -left: Set on each child. Adjust each child's snap area, useful when items have decorative borders or shadows that should not count toward the snap edge.
• scrollsnapchange and scrollsnapchanging events: Newer JavaScript events that fire when the snapped child changes. Available in Chrome 129+ and Safari 18.2+, useful for syncing dot indicators or analytics.

How do you check if a browser supports CSS Scroll Snap?

Use a CSS feature query so unsupported browsers fall back to a normal scrolling layout while modern browsers light up the snap behavior.

• Wrap the snap rules in @supports: @supports (scroll-snap-type: x mandatory) { .gallery { scroll-snap-type: x mandatory; } }. Browsers that do not understand the property skip the block entirely.
• Detect from JavaScript with CSS.supports(): CSS.supports('scroll-snap-type', 'x mandatory') returns true on every shipping modern browser and false on IE and very old mobile browsers.
• Probe scroll-snap-stop separately: @supports (scroll-snap-stop: always) lets you gate the always-stop behavior, since older Chrome, Safari, and Firefox versions support snap but not the stop modifier.
• Verify on real devices: Snap behavior depends on the platform's overscroll physics, so iOS Safari, Chrome Android, and Samsung Internet can each feel different even when the @supports query returns true.

What are the use cases of CSS Scroll Snap?

CSS Scroll Snap is the cleanest native option for any UI that benefits from item-by-item paging without a JavaScript carousel library.

• Horizontal product carousels: A flex row with scroll-snap-type: x mandatory and scroll-snap-align: start gives the same swipe-to-card feel as a JavaScript slider, with native momentum and accessibility for free.
• Full-page vertical pagers: A wrapper with scroll-snap-type: y mandatory and full-viewport sections turns long pages into onboarding flows or marketing sites that snap section by section.
• Image galleries and lightboxes: Snap to each image so taps and swipes always land on a clean frame, without writing scroll math in JavaScript.
• Mobile bottom-sheet pickers: A short scroll container with snap aligns picker rows to the cursor, mimicking the iOS native picker without a third-party component.
• Tabbed dashboards on small screens: Snap between dashboard panels horizontally on phones while a desktop layout uses a normal grid, all from the same HTML.

What are the known issues with CSS Scroll Snap?

CSS Scroll Snap is stable in modern browsers, but a handful of cross-engine quirks still bite in production.

• scroll-snap-stop arrived later than the rest of the spec: Chrome shipped it in 75, Edge in 79, Safari in 15, and Firefox in 103. Pages that need a hard stop on every item have to feature-detect it, since older browsers silently ignore the property.
• iOS Safari momentum quirks: In my experience, mandatory snapping on iOS Safari can fight the platform's elastic overscroll, so a fast flick that should pass two items sometimes lands on the next one. Switching to proximity often feels more natural on touch.
• Internet Explorer legacy syntax gap: IE 10 and 11 only support the old Scroll Snap Points draft, which lacks scroll-snap-align and scroll-snap-stop. Most teams now drop IE entirely instead of shipping the -ms- fallback.
• Snap interferes with programmatic scrolling: element.scrollTo({ top: 800, behavior: 'smooth' }) can land on the nearest snap point instead of the requested offset when scroll-snap-type: y mandatory is active, which breaks anchor-style navigation inside the same page.
• scrollend timing varies: The standard scrollend event fires inconsistently across engines while a snap is settling. The newer scrollsnapchange event in Chrome 129+ and Safari 18.2+ is the cleaner signal, but it is not yet universal.
• Keyboard and screen-reader traps: Snap containers can swallow tab focus if children are not in source order. Pair scroll-snap-stop: always with proper tabindex management so users without a touchscreen can reach every item.

Citations

All CSS Scroll Snap version numbers and platform notes in this guide come from these primary sources:

• MDN Web Docs - CSS scroll snap: developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap
• MDN Web Docs - scroll-snap-type: developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
• MDN Web Docs - scroll-snap-align: developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-align
• MDN Web Docs - scroll-snap-stop: developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-stop
• MDN Web Docs - @supports feature query: developer.mozilla.org/en-US/docs/Web/CSS/@supports
• W3C - CSS Scroll Snap Module Level 1: w3.org/TR/css-scroll-snap-1/
• web.dev - Well-controlled scrolling with CSS Scroll Snap: web.dev/articles/css-scroll-snap
• Chrome for Developers - Scroll-driven snap events: developer.chrome.com/blog/scroll-snap-events
• WebKit - Scroll Snapping Examples: webkit.org/demos/scroll-snap/
• Microsoft Learn - Site compatibility-impacting changes coming to Microsoft Edge: learn.microsoft.com/en-us/microsoft-edge/web-platform/site-impacting-changes
• Wikipedia - Cascading Style Sheets: en.wikipedia.org/wiki/Cascading_Style_Sheets