scroll-margin
Expand a target’s alignment area for snapping and scroll-into-view navigation.
Overview
| Class | Declarations |
|---|---|
scroll-m:<size> | scroll-margin: <size>;
|
scroll-m:<vertical>|<horizontal> | scroll-margin: <vertical> <horizontal>;
|
scroll-m:<top>|<horizontal>|<bottom> | scroll-margin: <top> <horizontal> <bottom>;
|
scroll-m:<top>|<right>|<bottom>|<left> | scroll-margin: <top> <right> <bottom> <left>;
|
scroll-mt:<size> | scroll-margin-top: <size>;
|
scroll-mr:<size> | scroll-margin-right: <size>;
|
scroll-mb:<size> | scroll-margin-bottom: <size>;
|
scroll-ml:<size> | scroll-margin-left: <size>;
|
scroll-mx:<size> | scroll-margin-inline: <size>;
|
scroll-mx:<inline-start>|<inline-end> | scroll-margin-inline: <inline-start> <inline-end>;
|
scroll-my:<size> | scroll-margin-block: <size>;
|
scroll-my:<block-start>|<block-end> | scroll-margin-block: <block-start> <block-end>;
|
scroll-mxs:<size> | scroll-margin-inline-start: <size>;
|
scroll-mxe:<size> | scroll-margin-inline-end: <size>;
|
scroll-mys:<size> | scroll-margin-block-start: <size>;
|
scroll-mye:<size> | scroll-margin-block-end: <size>;
|
Examples
Offset anchor targets
scroll-mt:* expands a target’s scroll-into-view area above its border box. Activate Details: its 64px offset clears the 48px sticky header and leaves a 16px gap. The target’s layout position and size do not change.
<div id="scrollport" class="overflow-y:auto h:14rem" tabindex="0" aria-label="Scrollable collection"> <header class="sticky top z:1 h:3rem">Collection navigation</header> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs scroll-mt-3xl"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>Generated CSS
@layer theme { :root, :host { --spacing-3xl: 4rem }}@layer utilities { .scroll-mt-3xl { scroll-margin-top: var(--spacing-3xl) }}The destination controls use the browser’s scroll-into-view behavior. The same offset applies to an ordinary fragment link such as <a href="#details">Details</a>.
Add horizontal snap margin
scroll-mx:* expands the snap area on both horizontal sides. With start alignment, the left expansion changes where the target stops; it does not center the item or add layout space between cards. Choose Panel 2 to compare the gap at the leading edge.
<div id="scrollport" class="flex overflow-x:auto gap-md scroll-snap-type:x|mandatory" tabindex="0" aria-label="Horizontal panels"> <article id="panel-1" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 1</article> <article id="panel-2" class="flex-shrink:0 h:9rem w:12rem scroll-mx-md snap-start">Panel 2</article> <article id="panel-3" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 3</article> <article id="panel-4" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 4</article> <article id="panel-5" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 5</article> <article id="panel-6" class="flex-shrink:0 h:9rem w:12rem snap-start">Panel 6</article></div>Generated CSS
@layer theme { :root, :host { --spacing-md: 1rem }}@layer utilities { .scroll-mx-md { scroll-margin-inline: var(--spacing-md) }}Use all-side margin for compact cases
scroll-m:* expands the target’s scroll area on all four sides. In this vertical example, the top expansion leaves 12px above Details when it is scrolled into view.
<div id="scrollport" class="overflow-y:auto h:14rem" tabindex="0" aria-label="Scrollable collection"> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs scroll-m-sm"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>The destination controls use the browser’s scroll-into-view behavior. The same offset applies to an ordinary fragment link such as <a href="#details">Details</a>.
Apply conditionally
Use selectors and conditional queries to apply the change only when its condition matches. Details uses 16px of top scroll margin by default and 32px from sm. Resize and activate Details again to compare its resting position.
<div id="scrollport" class="overflow-y:auto h:14rem" tabindex="0" aria-label="Scrollable collection"> <section id="overview" class="h-3xs"> <strong>Overview</strong> <p>Collect the decisions and shared assets for this project in one place.</p> </section> <section id="details" class="h-3xs scroll-mt-md scroll-mt-xl@sm"> <strong>Details</strong> <p>Review the structure, spacing and behavior before preparing the final handoff.</p> </section> <section id="resources" class="h-3xs"> <strong>Resources</strong> <p>Keep source files and supporting notes beside the finished collection.</p> </section></div>The destination controls use the browser’s scroll-into-view behavior. The same offset applies to an ordinary fragment link such as <a href="#details">Details</a>.