Question 1

What is CSS Scroll Snap?

Accepted Answer

CSS Scroll Snap is a CSS module that lets you control scroll snapping behavior. When a scroll container has scroll snapping enabled, it will snap to certain positions during scrolling, creating a paged or carousel-like experience. All modern browsers support it.

Question 2

What values can scroll-snap-type take?

Accepted Answer

scroll-snap-type combines an axis (x, y, both, inline, block) and a strictness (mandatory, proximity). Mandatory always snaps to snap positions, while proximity snaps only when near a snap point.

Question 3

How does scroll-snap-align work?

Accepted Answer

scroll-snap-align is set on child elements. start aligns the element's start edge with the container's snap position, center aligns the center, and end aligns the end edge.

Question 4

What's the difference between mandatory and proximity?

Accepted Answer

mandatory always forces snapping to the nearest snap point, which is consistent but can trap the user if content is larger than the viewport. proximity only snaps when close to a snap point, giving a more natural feel. proximity is recommended for most use cases.

📜 CSS Scroll Snap Generator

⚙️ Scroll Container Settings

🎨 Preview Colors

👁️ Live Preview

💻 CSS Code

📖 CSS Scroll Snap Explained

Key Properties

Use Cases

Browser Support