scroll-padding-bottom
스크롤 컨테이너의 아래쪽 패딩을 설정하여 스크롤 스냅 위치를 조정합니다. 고정 하단 바(bottom bar)가 콘텐츠를 가리는 것을 방지합니다.
클래스 목록
패턴: spb{값}{단위}
| 클래스 | 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 패딩 |
사용 예시
<!-- 고정 하단 바가 있는 페이지 -->
<div class="spb6rem oya h100vh">
<section id="s1">섹션 1</section>
<section id="s2">섹션 2</section>
</div>
<footer class="pf b0 l0 w100p h6rem bg18181B">
하단 네비게이션
</footer>
<!-- 모바일 하단 탭바 보정 -->
<main class="spb8rem oya">
콘텐츠가 하단 탭바에 가려지지 않습니다.
</main>