Interactivity

Scroll Snap v1.1.0

Utilities for sets viewport lock to certain elements or locations after finished scrolling.


Class

classcss
scroll-snap {type} {align}scroll-snap-type: {type};
scroll-snap-align: {align}
Note: Your browser does not currently support the utilities.
classcss
x-mandatoryscroll-snap-type: x mandatory
y-mandatoryscroll-snap-type: y mandatory
x-proximityscroll-snap-type: x proximity
y-proximityscroll-snap-type: y proximity
block-mandatoryscroll-snap-type: block mandatory
block-proximityscroll-snap-type: block proximity
inline-mandatoryscroll-snap-type: inline mandatory
inline-proximityscroll-snap-type: inline proximity
both-mandatoryscroll-snap-type: both mandatory
both-proximityscroll-snap-type: both proximity
classcss
align-nonescroll-snap-align: none
align-startscroll-snap-align: start
align-centerscroll-snap-align: center
align-endscroll-snap-align: end
Note: Utility customizing is unavailable.

Usage

Set the horizontal scroll image gallery. The image snaps to the left container after scrolling.

<!-- Example -->
<y class="scroll-snap x-mandatory align-start ... flex overflow-x-scroll">
<img src="...">
<img src="...">
...
</y>

Set the vertical scroll image gallery. The image snaps to the top container after scrolling.

<!-- Example -->
<y class="scroll-snap y-mandatory align-start ... overflow-y-scroll">
<img src="...">
<img src="...">
...
</y>

Set the horizontal and vertical scroll image gallery. The image snaps to the center container after scrolling.

<!-- Example -->
<y class="scroll-snap x-mandatory y-mandatory align-center ... flex flex-wrap overflow-scroll">
<img src="...">
<img src="...">
...
</y>

Variant

VariantEnabledResponsive
DefaultYesYes
Dark Theme
hover
group-hover
focus
focus-within
active
visited
checked
disabled