Interactivity

Scroll Snap Stop

Utilities for controlling whether you can skip past possible snap positions.

Quick reference

Class
Properties
snap-normalscroll-snap-stop: normal;
snap-alwaysscroll-snap-stop: always;

Basic usage

Forcing snap position stops

Use the snap-always utility together with the snap-mandatory utility to force a snap container to always stop on an element before the user can continue scrolling to the next item.

Scroll Snap Stop - 图1

Scroll in the grid of images to see the expected behaviour

Scroll Snap Stop - 图2

  1. <div class="snap-x snap-mandatory ...">
  2.   <div class="snap-always snap-center ...">
  3.     <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  4.   </div>
  5.   <div class="snap-always snap-center ...">
  6.     <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  7.   </div>
  8.   <div class="snap-always snap-center ...">
  9.     <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  10.   </div>
  11.   <div class="snap-always snap-center ...">
  12.     <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  13.   </div>
  14.   <div class="snap-always snap-center ...">
  15.     <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  16.   </div>
  17.   <div class="snap-always snap-center ...">
  18.     <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  19.   </div>
  20. </div>

Skipping snap position stops

Use the snap-normal utility to allow a snap container to skip past possible scroll snap positions.

Scroll Snap Stop - 图3

Scroll in the grid of images to see the expected behaviour

Scroll Snap Stop - 图4

  1. <div class="snap-x ...">
  2.   <div class="snap-normal snap-center ...">
  3.     <img src="https://images.unsplash.com/photo-1604999565976-8913ad2ddb7c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  4.   </div>
  5.   <div class="snap-normal snap-center ...">
  6.     <img src="https://images.unsplash.com/photo-1540206351-d6465b3ac5c1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  7.   </div>
  8.   <div class="snap-normal snap-center ...">
  9.     <img src="https://images.unsplash.com/photo-1622890806166-111d7f6c7c97?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  10.   </div>
  11.   <div class="snap-normal snap-center ...">
  12.     <img src="https://images.unsplash.com/photo-1590523277543-a94d2e4eb00b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  13.   </div>
  14.   <div class="snap-normal snap-center ...">
  15.     <img src="https://images.unsplash.com/photo-1575424909138-46b05e5919ec?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  16.   </div>
  17.   <div class="snap-normal snap-center ...">
  18.     <img src="https://images.unsplash.com/photo-1559333086-b0a56225a93c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=320&h=160&q=80" />
  19.   </div>
  20. </div>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use hover:snap-normal to only apply the snap-normal utility on hover.

  1. <div class="snap-always hover:snap-normal">
  2.   <!-- ... -->
  3. </div>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:snap-normal to apply the snap-normal utility at only medium screen sizes and above.

  1. <div class="snap-always md:snap-normal">
  2.   <!-- ... -->
  3. </div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.