CSS Scroll Snap Playground - Interactive Demo

How to use this tool

Choose a snap type (horizontal, vertical, or both).
Set snap alignment and scroll behavior.
Scroll the preview container to see the snap behavior live.
Click "Copy CSS" to get the container and item styles.

CSS scroll properties

Property	Values	Description
`scroll-behavior`	`auto`, `smooth`	Animates scrolling triggered by anchor links or `scrollTo()`
`scroll-snap-type`	`x mandatory`, `y proximity`	Snaps scroll position to defined snap points
`scroll-snap-align`	`start`, `center`, `end`	Which edge of child items to snap to
`overscroll-behavior`	`contain`, `none`	Prevents scroll chaining to parent elements
`scrollbar-gutter`	`stable`	Reserves space for scrollbar to prevent layout shift

Scroll snap example

To create a full-screen scroll snapping page:

.container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.section {
  height: 100vh;
  scroll-snap-align: start;
}

Browser support note

scroll-snap-type has excellent browser support (96%+ global coverage) and requires no vendor prefix in modern browsers. scrollbar-gutter is supported in Chrome 94+, Edge 94+, and Firefox 97+, but has no support in Safari (as of 2025) - use a @supports rule if you need to target Safari. The -webkit- prefix is not needed for any of the core scroll properties in current browsers.

Common scroll UX patterns

Full-page scroll snapping: use scroll-snap-type: y mandatory on the container and scroll-snap-align: start on each section for a presentation-style page.
Horizontal carousel: scroll-snap-type: x mandatory with horizontal overflow on a flex container of fixed-width cards. Add overscroll-behavior-x: contain to prevent the swipe from scrolling the page.
Chat / log sticky-scroll: use overflow-anchor or set scroll-behavior: smooth combined with JavaScript to keep new messages in view.
Infinite scroll: use IntersectionObserver to detect when the user approaches the bottom rather than scroll event listeners.

Scroll performance tips

Use will-change: scroll-position sparingly - it consumes extra GPU memory and should only be applied to elements where the performance benefit is measurable.
Prefer overflow-anchor (the CSS property, which is enabled by default) over JavaScript-based scroll anchoring when content is inserted above the current view.
Avoid scroll event listeners for detecting position; use IntersectionObserver or ResizeObserver instead - they fire off the main thread and don't block rendering.

Frequently asked questions

What is CSS scroll snap?

CSS scroll snap lets you control where a scroll container stops after the user finishes scrolling. It creates crisp, "snapping" scroll behavior used in carousels, full-screen sections, and image galleries.