Snapping to stopping points
Scroll snap lets a scroll container settle on defined positions instead of stopping anywhere. You set up the container and then mark child elements as snap targets so scrolling rests neatly on each one. This powers carousels, image galleries, and full page sections without script.
- Set scroll snap type on the scroll container.
- Choose the axis and how strict the snap is.
- Mark children with scroll snap align to define landing points.
Strictness and alignment
The snap type chooses an axis and a strictness keyword. Mandatory always lands on a snap point, while proximity only snaps when the scroll ends nearby, which is gentler for long content.
- Mandatory forces a rest on the nearest snap point.
- Proximity snaps only when already close.
- scroll snap align start, center, or end sets where each child locks.
Scroll padding and scroll margin let you offset the snap position so a sticky header does not cover the snapped item.
Key idea
Scroll snap defines an axis, a strictness, and per child alignment so a scroll container rests on clean stopping points for carousels and paged layouts.