What is CSS Scroll Snap?

CSS Scroll Snap is a specification that lets you define snap points along a scroll container's axis. When the user finishes scrolling, the browser snaps to the nearest snap point instead of stopping at an arbitrary position.

What is the difference between mandatory and proximity?

With "mandatory", the browser always snaps to a snap point after every scroll, even if the point is far away. With "proximity", the browser only snaps when the scroll position is close enough to a snap point.

What does scroll-snap-align do?

scroll-snap-align defines which part of a snap item aligns with the scroll container's snap port. "start" aligns the item's leading edge, "center" centers the item, and "end" aligns the trailing edge.

What does scroll-snap-stop do?

scroll-snap-stop controls whether fast scrolling can skip over snap points. The default "normal" allows skipping; "always" forces the scroll to stop at every snap point regardless of scroll speed.

What is scroll-padding?

scroll-padding offsets the snap port from the container's edge, useful when you have a sticky header. For example, scroll-padding-top: 60px prevents content from snapping behind a 60px header.

Is scroll snap well supported?

Yes. CSS Scroll Snap is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. No vendor prefixes are needed for current browser versions.

CSS Scroll Snap Builder

Name: CSS Scroll Snap Builder
Availability: InStock
Author: Nham Vu

Configure scroll snap container and item properties with dropdowns, see a live scrollable preview, then copy the generated CSS.

Container Properties

scroll-snap-type — axis

scroll-snap-type — strictness

overflow

scroll-padding (all sides)

Item Properties

scroll-snap-align

scroll-snap-stop

scroll-margin (all sides)

Tip: The preview reflects your axis selection. Scroll within the preview panel to feel the snap behavior live.

Live Preview

Scroll inside the box to test snapping

Generated CSS

Summary

Configure scroll snap container and item properties with dropdowns, see a live scrollable preview, then copy the generated CSS.

How it works

Choose the scroll direction (x, y, or both) and snapping strictness (mandatory or proximity) for the container.
Set scroll-padding on the container to offset snapping from the edge.
Select scroll-snap-align (start, center, or end) and scroll-snap-stop for child items.
Watch the live preview update instantly — scroll through it to feel the snap behavior.
Click "Copy CSS" to copy the full container and item ruleset to your clipboard.

Use cases

Building full-page scroll sections that snap cleanly to each slide.
Creating horizontal image carousels with predictable swipe behavior.
Designing mobile-friendly scrollable menus with snap points.
Teaching or demonstrating scroll snap to teammates or students.
Prototyping a scroll-driven layout before writing production code.
Testing the difference between mandatory and proximity snapping.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu