# Source: https://github.com/tailwindlabs/tailwindcss.com/blob/main/src/docs/scroll-snap-type.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-type";
export const description = "Utilities for controlling how strictly snap points are enforced in a snap container.";

<ApiTable
  rows={[
    ["snap-none", "scroll-snap-type: none;"],
    ["snap-x", "scroll-snap-type: x var(--tw-scroll-snap-strictness);"],
    ["snap-y", "scroll-snap-type: y var(--tw-scroll-snap-strictness);"],
    ["snap-both", "scroll-snap-type: both var(--tw-scroll-snap-strictness);"],
    ["snap-mandatory", "--tw-scroll-snap-strictness: mandatory;"],
    ["snap-proximity", "--tw-scroll-snap-strictness: proximity;"],
  ]}
/>

## Examples

### Horizontal scroll snapping

Use the `snap-x` utility to enable horizontal scroll snapping within an element:

<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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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-center] -->
<div class="snap-x ...">
  <div class="snap-center ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>
```

</Figure>

For scroll snapping to work, you need to also set the [scroll snap alignment](/docs/scroll-snap-align) on the children.

### Mandatory scroll snapping

Use the `snap-mandatory` utility to force a snap container to always come to rest on a snap point:

<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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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-mandatory] -->
<div class="snap-x snap-mandatory ...">
  <div class="snap-center ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-center ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>
```

</Figure>

### Proximity scroll snapping

Use the `snap-proximity` utility to make a snap container come to rest on snap points that are close in proximity:

<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-proximity 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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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 first:pl-8 last:pr-8">
          <img
            className="h-40 w-80 shrink-0 rounded-lg bg-white"
            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">
          <div className="w-4 shrink-0 sm:w-37"></div>
        </div>
      </div>
    </div>
  }
</Example>

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

</Figure>

### Responsive design

<ResponsiveDesign property="scroll-snap-type" defaultClass="snap-none" featuredClass="snap-x" />