Interactivity
Scroll Snap v1.1.0
Utilities for sets viewport lock to certain elements or locations after finished scrolling.
Class
class | css |
---|---|
scroll-snap {type} {align} | scroll-snap-type: {type} ;scroll-snap-align: {align} |
class | css |
---|---|
x-mandatory | scroll-snap-type: x mandatory |
y-mandatory | scroll-snap-type: y mandatory |
x-proximity | scroll-snap-type: x proximity |
y-proximity | scroll-snap-type: y proximity |
block-mandatory | scroll-snap-type: block mandatory |
block-proximity | scroll-snap-type: block proximity |
inline-mandatory | scroll-snap-type: inline mandatory |
inline-proximity | scroll-snap-type: inline proximity |
both-mandatory | scroll-snap-type: both mandatory |
both-proximity | scroll-snap-type: both proximity |
class | css |
---|---|
align-none | scroll-snap-align: none |
align-start | scroll-snap-align: start |
align-center | scroll-snap-align: center |
align-end | scroll-snap-align: end |
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | Yes |
Dark Theme | ||
hover | ||
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |