Interactivity
Utilities for controlling the scroll snap alignment of an element.
Class | Styles |
---|---|
snap-start | scroll-snap-align: start; |
snap-end | scroll-snap-align: end; |
snap-center | scroll-snap-align: center; |
snap-align-none | scroll-snap-align: none; |
Use the snap-center
utility to snap an element to its center when being scrolled inside a snap container:
Scroll in the grid of images to see the expected behavior
Use the snap-start
utility to snap an element to its start when being scrolled inside a snap container:
Scroll in the grid of images to see the expected behavior
Use the snap-end
utility to snap an element to its end when being scrolled inside a snap container:
Scroll in the grid of images to see the expected behavior
Prefix a scroll-snap-align
utility with a breakpoint variant like md:
to only apply the utility at medium screen sizes and above:
<div class="snap-center md:snap-start ..."> <!-- ... --></div>
Learn more about using variants in the variants documentation.