Scroll Snap Align

Utility	Properties
ssa-c	scroll-snap-align: center;
ssa-e	scroll-snap-align: end;
ssa-none	scroll-snap-align: none;
ssa-s	scroll-snap-align: start;

Center

This example sets the scroll snap align to center. The ssa-c utility ensures that the element will snap to the center of the scroll container when scrolling.

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">
      <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">
      <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">
      <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">
      <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">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
  </div>
</div>

End

This example sets the scroll snap align to end. The ssa-e utility ensures that the element will snap to the end of the scroll container when scrolling.

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-e">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
    <div class="fs-0 p-r ssa-e">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=849" />
    </div>
    <div class="fs-0 p-r ssa-e">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=866" />
    </div>
    <div class="fs-0 p-r ssa-e">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=872" />
    </div>
    <div class="fs-0 p-r ssa-e">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=875" />
    </div>
    <div class="fs-0 p-r ssa-e">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
  </div>
</div>

Start

This example sets the scroll snap align to start. The ssa-s utility ensures that the element will snap to the start of the scroll container when scrolling.

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-s">
      <div class="h-40 rad-1 stripes w-80"></div>
    </div>
    <div class="fs-0 p-r ssa-s">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=849" />
    </div>
    <div class="fs-0 p-r ssa-s">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=866" />
    </div>
    <div class="fs-0 p-r ssa-s">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=872" />
    </div>
    <div class="fs-0 p-r ssa-s">
      <img class="h-40 rad-1 w-80" src="https://picsum.photos/400/200?image=875" />
    </div>
    <div class="fs-0 p-r ssa-s">
      <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:ssa-*,md:ssa-*, lg:ssa-*, and xxl:ssa-* allows targeting specific utilities in different viewports.

<div class="ssa-s md:ssa-e ..."></div>

Hover modifiers

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

<div class="ssa-s h:ssa-e ..."></div>