scroll-margin
Adds an offset (margin) to the snap position of an element during scroll snapping. Like regular margin, you can specify each direction individually, used to fine-tune snap point alignment.
Class List
| Pattern | CSS | Description |
|---|---|---|
sm{N}px | scroll-margin: {N}px | All-direction scroll-margin |
smt{N}px | scroll-margin-top: {N}px | Top scroll-margin |
smr{N}px | scroll-margin-right: {N}px | Right scroll-margin |
smb{N}px | scroll-margin-bottom: {N}px | Bottom scroll-margin |
sml{N}px | scroll-margin-left: {N}px | Left scroll-margin |
Usage Examples
Adjusts snap positions by adding margins to scroll snap items.
<!-- Apply scroll-margin to snap items -->
<div class="oxa df" style="scroll-snap-type: x mandatory">
<div class="sml16px fs0 w100p">Item 1</div>
<div class="sml16px fs0 w100p">Item 2</div>
<div class="sml16px fs0 w100p">Item 3</div>
</div>
<!-- Top margin in vertical scroll -->
<div class="oya h30rem" style="scroll-snap-type: y mandatory">
<section class="smt2rem h30rem">Section 1</section>
<section class="smt2rem h30rem">Section 2</section>
</div>Direction-specific Application
You can specify scroll-margin individually for each direction.
<!-- Directional scroll-margin -->
<div class="smt16px">16px margin on top</div>
<div class="smr2rem">20px margin on right</div>
<div class="smb8px">8px margin on bottom</div>
<div class="sml12px">12px margin on left</div>
<!-- All directions -->
<div class="sm2rem">20px margin in all directions</div>Tips & Notes
scroll-margin vs scroll-padding
scroll-margin is applied to snap child elements, while scroll-padding is applied to the scroll container. Both adjust snap positions but target different elements.
Unit Rules
Use px for values under 20px (e.g., sm16px), and rem for 20px and above (e.g., sm2rem).