Scroll Snap Stop

Class	Style
sss-a	scroll-snap-stop: always;
sss-n	scroll-snap-stop: normal;

Normal

Initial value

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 w-80" id="area"></div>
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-n">
      <div class="h-40 rad-1 w-80" id="area"></div>
    </div>
  </div>
</div>

Always

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 w-80" id="area"></div>
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <img class="h-40 rad-1 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r ssa-c sss-a">
      <div class="h-40 rad-1 w-80" id="area"></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.

Breakpoint variant

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

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

Hover variant

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>