ContextQMD
Back to Tailwindcss

Scroll Margin

src/docs/scroll-margin.mdx

latest11.8 KB
Original Source

import { ApiTable } from "@/components/api-table.tsx"; import { CustomizingYourSpacingScale, ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { Stripes } from "@/components/stripes.tsx";

export const title = "scroll-margin"; export const description = "Utilities for controlling the scroll offset around items in a snap container.";

<ApiTable rows={[ ["scroll-m", "scroll-margin"], ["scroll-mx", "scroll-margin-inline"], ["scroll-my", "scroll-margin-block"], ["scroll-ms", "scroll-margin-inline-start"], ["scroll-me", "scroll-margin-inline-end"], ["scroll-mbs", "scroll-margin-block-start"], ["scroll-mbe", "scroll-margin-block-end"], ["scroll-mt", "scroll-margin-top"], ["scroll-mr", "scroll-margin-right"], ["scroll-mb", "scroll-margin-bottom"], ["scroll-ml", "scroll-margin-left"], ].flatMap(([prefix, property]) => [ [${prefix}-<number>, ${property}: calc(var(--spacing) * <number>);], [-${prefix}-<number>, ${property}: calc(var(--spacing) * -<number>);], [${prefix}-(<custom-property>), ${property}: var(<custom-property>);], [${prefix}-[<value>], ${property}: <value>;], ])} />

Examples

Basic example

Use the scroll-mt-<number>, scroll-mr-<number>, scroll-mb-<number>, and scroll-ml-<number> utilities like scroll-ml-4 and scroll-mt-6 to set the scroll offset around items within a snap container:

<Figure hint="Scroll in the grid of images to see the expected behavior"> <Example padding={false}> { <div className="flex w-full snap-x gap-12 overflow-x-auto py-14"> <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]"> <Stripes border className="absolute top-0 bottom-0 left-0 w-6" /> 
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">
    <Stripes border className="absolute top-0 bottom-0 -left-6 w-6" />
    
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">
    <Stripes border className="absolute top-0 bottom-0 -left-6 w-6" />
    
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">
    <Stripes border className="absolute top-0 bottom-0 -left-6 w-6" />
    
  </div>
  <div className="relative shrink-0 snap-start scroll-ml-6 first:pl-6 last:pr-[calc(100%-21.5rem)]">
    <Stripes border className="absolute top-0 bottom-0 -left-6 w-6" />
    
  </div>
</div>

} </Example>

html
<!-- [!code classes:scroll-ml-6] -->
<div class="snap-x ...">
  <div class="snap-start scroll-ml-6 ...">
    
  </div>
  <div class="snap-start scroll-ml-6 ...">
    
  </div>
  <div class="snap-start scroll-ml-6 ...">
    
  </div>
  <div class="snap-start scroll-ml-6 ...">
    
  </div>
  <div class="snap-start scroll-ml-6 ...">
    
  </div>
</div>
</Figure>

Using negative values

To use a negative scroll margin value, prefix the class name with a dash to convert it to a negative value:

html
<!-- [!code classes:-scroll-ml-6] -->
<div class="snap-start -scroll-ml-6 ...">
  <!-- ... -->
</div>

Using logical properties

Use the scroll-ms-<number> and scroll-me-<number> utilities to set the scroll-margin-inline-start and scroll-margin-inline-end logical properties, which map to either the left or right side based on the text direction:

<Figure hint="Scroll in the grid of images to see the expected behavior"> <Example padding={false}> { <> <p className="mb-4 pt-8 pl-6 text-sm font-medium">Left-to-right</p> <div className="flex w-full snap-x gap-12 overflow-x-auto pb-10" dir="ltr"> <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]"> <Stripes border className="absolute start-0 top-0 bottom-0 w-6" /> 
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pr-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
  </div>
  <p className="mt-4 mb-4 pl-6 text-sm font-medium">Right-to-left</p>
  <div className="flex w-full snap-x gap-12 overflow-x-auto pb-10" dir="rtl">
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">
      <Stripes border className="absolute start-0 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
    <div className="relative shrink-0 snap-start scroll-ms-6 first:ps-6 last:pl-[calc(100%-21.5rem)]">
      <Stripes border className="absolute -start-6 top-0 bottom-0 w-6" />
      
    </div>
  </div>
</>

} </Example>

html
<!-- [!code classes:scroll-ms-6] -->
<!-- [!code word:dir="ltr"] -->
<!-- [!code word:dir="rtl"] -->
<div dir="ltr">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      
    </div>
    <!-- ... -->
  </div>
</div>

<div dir="rtl">
  <div class="snap-x ...">
    <div class="snap-start scroll-ms-6 ...">
      
    </div>
    <!-- ... -->
  </div>
</div>
</Figure>

For more control, you can also use the LTR and RTL modifiers to conditionally apply specific styles depending on the current text direction.

Use the scroll-mbs-<number> and scroll-mbe-<number> utilities to set the scroll-margin-block-start and scroll-margin-block-end logical properties, which map to either the top or bottom side based on the writing mode:

html
<!-- [!code classes:scroll-mbs-6] -->
<div class="snap-y ...">
  <div class="snap-start scroll-mbs-6 ...">
    <!-- ... -->
  </div>
</div>

Using a custom value

<UsingACustomValue utilities={["scroll-ml", "scroll-me"]} value="24rem" name="scroll margin" variable="scroll-margin" />

Responsive design

<ResponsiveDesign property="scroll-margin" defaultClass="scroll-m-8" featuredClass="scroll-m-0" />

Customizing your theme

<CustomizingYourSpacingScale utilities={[ "scroll-m", "scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mbs", "scroll-mbe", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml", ]} />