InteractivityScroll Snap Type

Yumma CSS 3.5 is live! 🎉

Scroll Snap Type

Controls the strictness of snap points in a snap container.

Widely available

This feature is well established and works across many devices and browser versions.

Chrome

Edge

Firefox

Safari

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 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 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 w-80" src="/img/coast.jpg" />
    </div>
    <div class="fs-0 p-r pb-6 smb-6 ssa-s">
      <img class="h-40 w-80" src="/img/coast.jpg" />
    </div>
  </div>
</div>

Using utility variants

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

Targeting different viewports

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

Targeting hover states

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