Scroll Snap Type

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">

} </Example>

</Figure>

For scroll snapping to work, you need to also set the scroll snap alignment 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">

} </Example>

</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">

} </Example>

</Figure>

Responsive design

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