scroll-padding-bottom
Sets the bottom padding of a scroll container to adjust scroll snap positions. Prevents a fixed bottom bar from obscuring content.
Class List
Pattern: spb{value}{unit}
| Class | CSS | Description |
|---|---|---|
spb0 | scroll-padding-bottom: 0 | No scroll padding |
spb8px | scroll-padding-bottom: 8px | 8px padding |
spb16px | scroll-padding-bottom: 16px | 16px padding |
spb2rem | scroll-padding-bottom: 2rem | 20px padding |
spb4rem | scroll-padding-bottom: 4rem | 40px padding |
spb6rem | scroll-padding-bottom: 6rem | 60px padding |
Usage Examples
<!-- Page with fixed bottom bar -->
<div class="spb6rem oya h100vh">
<section id="s1">Section 1</section>
<section id="s2">Section 2</section>
</div>
<footer class="pf b0 l0 w100p h6rem bg18181B">
Bottom navigation
</footer>
<!-- Mobile bottom tab bar compensation -->
<main class="spb8rem oya">
Content is not obscured by the bottom tab bar.
</main>