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}`

Note: Your browser does not currently support the utilities.

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

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.