Interactivity

Scroll Snap

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

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

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

class	css
x-proximity	scroll-snap-type: x proximity
y-proximity	scroll-snap-type: y proximity

class	css
block-mandatory	scroll-snap-type: block mandatory
block-proximity	scroll-snap-type: block proximity

class	css
inline-mandatory	scroll-snap-type: inline mandatory
inline-proximity	scroll-snap-type: inline proximity

class	css
both-mandatory	scroll-snap-type: both mandatory
both-proximity	scroll-snap-type: both proximity

class	css
align-start	scroll-snap-align: start
align-center	scroll-snap-align: center
align-end	scroll-snap-align: end
align-none	scroll-snap-align: none

Usage

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

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

HTML

.dummy {
  @extend
    .scroll-snap,
    .x-mandatory,
    .align-start,
    .flex,
    .overflow-x-scroll;
}

SCSS

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

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

HTML

.dummy {
  @extend
    .scroll-snap,
    .y-mandatory,
    .align-start,
    .overflow-y-scroll;
}

SCSS

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

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

HTML

.dummy {
  @extend
    .scroll-snap,
    .x-mandatory,
    .y-mandatory,
    .align-center,
    .flex,
    .flex-wrap,
    .overflow-scroll;
}

SCSS