Scroll Snap Stop

Utility	Properties
sss-a	scroll-snap-stop: always;
sss-n	scroll-snap-stop: normal;

Always

This example sets the scroll snap stop to always. The sss-a utility ensures that the scroll will always stop at the snap position.

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

<div class="o-h pb-4 p-r">
  <div class="d-f g-6 o-x-s pb-4 sst-x-m">
    <div class="fs-0 p-r ssa-c">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=849" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=866" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=872" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=875" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
  </div>
</div>

Normal

This example sets the scroll snap stop to normal. The sss-n utility allows the scroll to stop at the snap position only when the user scrolls slowly, providing a more flexible scrolling experience.

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

<div class="o-h pb-4 p-r">
  <div class="d-f g-6 o-x-s pb-4 sst-x-m">
    <div class="fs-0 p-r ssa-c">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=849" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=866" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=872" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=875" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <div class="h-40 rad-1 stripes w-80"></div>
    </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.

Media modifiers

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

<div class="sns-a md:sns-n ..."></div>

Hover modifiers

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

<div class="sns-a h:sns-n ..."></div>