scroll-padding
Adds padding to the snap area of a scroll snap container. Useful for specifying offsets to prevent snapped items from being hidden behind a fixed header. For example, with a 64px sticky header, use spt6-4rem.
Class List
| Pattern | CSS | Description |
|---|---|---|
sp{N}px | scroll-padding: {N}px | All-direction scroll-padding |
spt{N}px | scroll-padding-top: {N}px | Top scroll-padding |
spr{N}px | scroll-padding-right: {N}px | Right scroll-padding |
spb{N}px | scroll-padding-bottom: {N}px | Bottom scroll-padding |
spl{N}px | scroll-padding-left: {N}px | Left scroll-padding |
Usage Examples
Compensates snap positions with scroll-padding-top in layouts with a sticky header.
<!-- Sticky header compensation (64px header) -->
<html class="sbs spt6-4rem">
<body>
<header class="ps t0 l0 w100p h6-4rem bg000000 zi100">
Fixed header
</header>
<main>
<section id="section1">Section 1</section>
<section id="section2">Section 2</section>
<section id="section3">Section 3</section>
</main>
</body>
</html>
<!-- Left padding on horizontal scroll container -->
<div class="oxa spl2rem" style="scroll-snap-type: x mandatory">
<div class="fs0 w100p">Slide 1</div>
<div class="fs0 w100p">Slide 2</div>
</div>Direction-specific Application
You can specify scroll-padding individually for each direction.
<!-- Directional scroll-padding -->
<div class="spt6-4rem">64px padding on top (sticky header)</div>
<div class="spr2rem">20px padding on right</div>
<div class="spb16px">16px padding on bottom</div>
<div class="spl16px">16px padding on left</div>
<!-- All directions -->
<div class="sp2rem">20px padding in all directions</div>Tips & Notes
Fixed Header Compensation
Setting spt to match the sticky header height prevents content from being hidden behind the header during scroll snapping or anchor navigation. 64px header → spt6-4rem.
Apply to Container
scroll-padding is applied to the scroll container. To adjust snap positions of child elements, use scroll-margin.