Scroll Snap Type

Class	Style
sst-b-m	scroll-snap-type: both mandatory;
sst-none	scroll-snap-type: none;
sst-x-m	scroll-snap-type: x mandatory;
sst-x-p	scroll-snap-type: x proximity;
sst-y-m	scroll-snap-type: y mandatory;
sst-y-p	scroll-snap-type: y proximity;

None

Initial value

Disables any snapping behavior, allowing for free scrolling without restrictions.

Try scrolling through the image container to see how it behaves.

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-none">
    <div class="fs-0 p-6 p-r sm-6 ssa-none">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Both Mandatory

Enables snapping in both horizontal and vertical directions, requiring the scroll to stop at defined snap points.

Try scrolling through the image container to see how it behaves.

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-b-m">
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
  </div>
</div>

X Mandatory

Enables snapping in the horizontal direction, requiring the scroll to stop at defined snap points along the x-axis.

Try scrolling through the image container to see how it behaves.

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-x-m">
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
  </div>
</div>

X Proximity

Enables snapping in the horizontal direction, allowing the scroll to stop at defined snap points only when the user scrolls slowly.

Try scrolling through the image container to see how it behaves.

<div class="o-h p-r">
  <div class="d-f g-6 o-x-s p-6 sst-x-p">
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-6 p-r sm-6 ssa-s">
      <img class="h-40 p-r rad-1 w-80 zi-10" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Y Mandatory

Enables snapping in the vertical direction, requiring the scroll to stop at defined snap points along the y-axis.

Try scrolling through the image container to see how it behaves.

<div class="o-h p-r w-fc">
  <div class="d-f fd-c g-6 h-96 o-y-auto p-6 sst-y-m">
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Y Proximity

Enables snapping in the vertical direction, allowing the scroll to stop at defined snap points only when the user scrolls slowly.

Try scrolling through the image container to see how it behaves.

<div class="o-h p-r w-fc">
  <div class="d-f fd-c g-6 h-96 o-y-auto p-6 sst-y-p">
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

You can combine responsive breakpoints like sm:sst-*,md:sst-*, lg:sst-*, and xxl:sst-* allows targeting specific utilities in different viewports.

<div class="sst-none md:sst-b-m ..."></div>

Hover variant

Alternatively, you can apply :hover by using h:sst-* utility to override elements and change their values when hovering over them.

<div class="sst-none h:sst-b-m ..."></div>