ContextQMD
Back to Tailwindcss

Scroll Snap Align

src/docs/scroll-snap-align.mdx

latest11.1 KB
Original Source

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-align"; export const description = "Utilities for controlling the scroll snap alignment of an element.";

<ApiTable rows={[ ["snap-start", "scroll-snap-align: start;"], ["snap-end", "scroll-snap-align: end;"], ["snap-center", "scroll-snap-align: center;"], ["snap-align-none", "scroll-snap-align: none;"], ]} />

Examples

Snapping to the center

Use the snap-center utility to snap an element to its center when being scrolled inside a snap container:

<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"> 
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </div>
    <div className="shrink-0 snap-center">
      
    </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 ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
  <div class="snap-center ...">
    
  </div>
</div>
</Figure>

Snapping to the start

Use the snap-start utility to snap an element to its start when being scrolled inside a snap container:

<Figure hint="Scroll in the grid of images to see the expected behavior"> <Example padding={false}> { <div className="relative"> <div className="mb-6 ml-6 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-6 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-start scroll-mx-6"> <div className="w-0 shrink-0"></div> </div> <div className="shrink-0 snap-start scroll-mx-6"> 
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-start scroll-mx-6">
      <div className="h-40 w-3 shrink-0 sm:-ml-[2px] sm:w-96"></div>
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:snap-x,snap-start] -->

<div class="snap-x ...">
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
  <div class="snap-start ...">
    
  </div>
</div>
</Figure>

Snapping to the end

Use the snap-end utility to snap an element to its end when being scrolled inside a snap container:

<Figure hint="Scroll in the grid of images to see the expected behavior"> <Example padding={false}> { <div className="relative"> <div className="mr-6 mb-6 flex items-end justify-end pt-10"> <div className="dark:highlight-white/10 mr-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 right-6 bottom-0 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-end scroll-mx-6"> <div className="w-3 shrink-0 sm:-mr-[2px] sm:w-10"></div> </div> <div className="shrink-0 snap-end scroll-mx-6"> 
    </div>
    <div className="shrink-0 snap-end scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-end scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-end scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-end scroll-mx-6">
      
    </div>
    <div className="shrink-0 snap-end scroll-mx-6 pr-6">
      
    </div>
  </div>
</div>

} </Example>

html
<!-- [!code classes:snap-x,snap-end] -->
<div class="snap-x ...">
  <div class="snap-end ...">
    
  </div>
  <div class="snap-end ...">
    
  </div>
  <div class="snap-end ...">
    
  </div>
  <div class="snap-end ...">
    
  </div>
  <div class="snap-end ...">
    
  </div>
  <div class="snap-end ...">
    
  </div>
</div>
</Figure>

Responsive design

<ResponsiveDesign property="scroll-snap-align" defaultClass="snap-center" featuredClass="snap-start" />