Skip to content

Latest commit

 

History

History
281 lines (257 loc) · 11.1 KB

scroll-snap-align.mdx

File metadata and controls

281 lines (257 loc) · 11.1 KB

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:

{
snap point
} 
<!-- [!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>

Snapping to the start

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

{
snap point
} 
<!-- [!code classes:snap-x,snap-start] -->

<div class="snap-x ...">
  <div class="snap-start ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-start ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

Snapping to the end

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

{
snap point
} 
<!-- [!code classes:snap-x,snap-end] -->
<div class="snap-x ...">
  <div class="snap-end ...">
    <img src="/img/vacation-01.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-02.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-03.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-04.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-05.jpg" />
  </div>
  <div class="snap-end ...">
    <img src="/img/vacation-06.jpg" />
  </div>
</div>

Responsive design