34 Scroll Snap. 34 of 95.
34/SCROLL BEHAVIOR/34 of 95
Scroll Snap
Scrolling should stop somewhere on purpose.
The problem
Free scrolling through a gallery leaves items awkwardly half-visible, requiring fiddly adjustment.
The solution
Scroll snaps to align each item with the viewport.
Experiment
How it works
- The scroller is a snap container, so resting position is part of the layout.
- Items mark the points the scroll is allowed to settle on.
- The user can still scroll freely while the gesture is active.
- When momentum ends, the scroll is no longer free.
- It settles to the nearest snap point so each item aligns with the viewport on purpose.
Seen in
Carousels
Image carousels land squarely on each slide.
Onboarding
Full-screen intro panels snap one at a time.
Galleries
Horizontal media rows align items after each swipe.
Section scrolling
Landing pages snap between full-height sections.