Scroll Snap Stop - Tailwindcss

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

Examples

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:

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

    </div>
    <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-always first:pl-8 last:pr-8">
      
    </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 ...">
    
  </div>
  <div class="snap-center snap-always ...">
    
  </div>
  <div class="snap-center snap-always ...">
    
  </div>
  <div class="snap-center snap-always ...">
    
  </div>
  <div class="snap-center snap-always ...">
    
  </div>
  <div class="snap-center snap-always ...">
    
  </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">

    </div>
    <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
      
    </div>
    <div className="shrink-0 snap-center snap-normal first:pl-8 last:pr-8">
      
    </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 ...">
    
  </div>
  <div class="snap-center snap-normal ...">
    
  </div>
  <div class="snap-center snap-normal ...">
    
  </div>
  <div class="snap-center snap-normal ...">
    
  </div>
  <div class="snap-center snap-normal ...">
    
  </div>
  <div class="snap-center snap-normal ...">
    
  </div>
</div>

</Figure>

Responsive design