# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-snap-stop.mdx

import { ApiTable } from "@/components/api-table.tsx";
import { Example } from "@/components/example.tsx";
import { Figure } from "@/components/figure.tsx";
import { ResponsiveDesign } from "@/components/content.tsx";

export const title = "scroll-snap-stop";
export const description = "Utilities for controlling whether you can skip past possible snap positions.";

<ApiTable
  rows={[
    ["snap-normal", "scroll-snap-stop: normal;"],
    ["snap-always", "scroll-snap-stop: always;"],
  ]}
/>

## Examples

### Forcing snap position stops

Use the `snap-always` utility together with the [snap-mandatory](/docs/scroll-snap-type#mandatory-scroll-snapping) utility to force a snap container to always stop on an element before the user can continue scrolling to the next item:

<Figure hint="Scroll in the grid of images to see the expected behavior">

<Example padding={false}>
  {
    <div className="relative">
      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
          snap point
        </div>
        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
      </div>
      <div className="relative flex w-full snap-x snap-mandatory gap-6 overflow-x-auto pb-14">
        <div className="shrink-0 snap-center">
          <div className="w-4 shrink-0 sm:w-37"></div>
        </div>
        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center">
          <div className="w-4 shrink-0 sm:w-37"></div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:snap-x,snap-mandatory,snap-always] -->
<div class="snap-x snap-mandatory ...">
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center snap-always ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>
```

</Figure>

### Skipping snap position stops

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

<Figure hint="Scroll in the grid of images to see the expected behavior">

<Example padding={false}>
  {
    <div className="relative">
      <div className="mb-6 ml-[50%] flex items-end justify-start pt-10">
        <div className="dark:highlight-white/10 ml-2 rounded bg-indigo-50 px-1.5 font-mono text-[0.625rem] leading-6 text-indigo-600 ring-1 ring-indigo-600 ring-inset dark:bg-indigo-500 dark:text-white dark:ring-0">
          snap point
        </div>
        <div className="absolute top-0 bottom-0 left-1/2 border-l border-indigo-500"></div>
      </div>
      <div className="relative flex w-full snap-x gap-6 overflow-x-auto pb-14">
        <div className="shrink-0 snap-center">
          <div className="w-4 shrink-0 sm:w-37"></div>
        </div>
        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white object-cover"
            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"
          />
        </div>
        <div className="shrink-0 snap-center">
          <div className="w-4 shrink-0 sm:w-37"></div>
        </div>
      </div>
    </div>
  }
</Example>

```html
<!-- [!code classes:snap-x,snap-normal] -->
<div class="snap-x ...">
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center snap-normal ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>
```

</Figure>

### Responsive design

<ResponsiveDesign property="scroll-snap-stop" defaultClass="snap-always" featuredClass="snap-normal" />