scroll-padding-bottom
스크롤 컨테이너의 아래쪽 패딩을 설정하여 스크롤 스냅 위치를 조정합니다. 고정 하단 바(bottom bar)가 콘텐츠를 가리는 것을 방지합니다.
클래스 목록
패턴: spb{값}{단위}
| <tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">클래스 | CSS | 설명 |
|---|---|---|
spb0 | scroll-padding-bottom: 0 | 스크롤 패딩 없음 |
spb8px | scroll-padding-bottom: 8px | 8px 패딩 |
spb16px | scroll-padding-bottom: 16px | 16px 패딩 |
spb2rem | scroll-padding-bottom: 2rem | 20px 패딩 |
spb4rem | scroll-padding-bottom: 4rem | 40px 패딩 |
spb6rem | scroll-padding-bottom: 6rem | 60px 패딩 |
사용 예시
<!-- 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>