Question 1

What is CSS scroll snap?

Accepted Answer

CSS scroll snap makes scroll positions lock to specific points after scrolling ends. The container uses scroll-snap-type (axis + strictness: mandatory or proximity) and items use scroll-snap-align (start, center, end). It creates carousel-like scrolling without JavaScript.

Question 2

How do I create a horizontal scroll snap carousel?

Accepted Answer

Container: overflow-x: scroll; scroll-snap-type: x mandatory; display: flex; gap: 1rem. Items: scroll-snap-align: start; min-width: 100% (full-width) or min-width: 300px (partial cards). Add overscroll-behavior-x: contain to prevent page scroll during swipe.

Question 3

What is the difference between mandatory and proximity snap?

Accepted Answer

mandatory always snaps to the nearest snap point when scrolling ends — the scroll can never rest between points. proximity snaps only when the scroll position is close to a snap point (within roughly one screen width). Use mandatory for carousels and proximity for long pages with occasional anchor sections.

CSS Scroll Snap Generator

Container — scroll-snap-type

Children — scroll-snap-align

Slides

Related Tools