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 패딩 |
라이브 데모
두 상자 모두 아래에 60px 높이의 가짜 하단 바가 덮여 있습니다. 위 버튼을 눌러 특정 섹션으로 스크롤해 보세요. 왼쪽은 섹션 아래쪽이 하단 바에 가려지고, 오른쪽은 하단 바 위에서 멈춥니다.
기본값 — scroll-padding 없음
섹션 1
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션 2
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션 3
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션 4
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션의 아래 끝이 컨테이너 바닥에 딱 붙어 하단 바 뒤로 숨습니다.
스크롤 패딩 60px — spb6rem
섹션 1
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션 2
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션 3
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
섹션 4
버튼으로 이 섹션을 아래쪽 기준으로 정렬했을 때, 아래 끝이 하단 바에 가려지는지 보세요.
컨테이너 바닥에서 60px 위에서 멈추므로 하단 바에 가려지지 않습니다.
클래스별 상세
spb0scroll-padding-bottom: 0
스크롤 패딩을 0으로 되돌립니다. 스크롤 대상은 컨테이너의 물리적 바닥에 정확히 맞춰집니다.
언제 쓰나
공통 레이아웃에서 스크롤 패딩을 걸어 뒀는데 특정 화면에는 하단 바가 없을 때, 그 컨테이너만 원래대로 돌려놓습니다.
<!-- Reset an inherited scroll padding back to zero -->
<div class="spb0 oya h100vh">
<section id="s1">Section 1</section>
</div>spb16pxscroll-padding-bottom: 16px
스크롤 대상이 바닥에 딱 붙지 않도록 16px 여유를 둡니다. 가리는 요소가 없어도 시각적 숨통을 틔우는 용도입니다.
언제 쓰나
스크롤 스냅 목록에서 카드가 컨테이너 모서리에 붙어 잘려 보이는 느낌을 없앨 때 씁니다.
<!-- Breathing room so a snapped card is not flush with the edge -->
<div class="spb16px oya h60rem sstym">
<article class="ssae minh20rem bg18181B br8px mb16px">Card 1</article>
<article class="ssae minh20rem bg18181B br8px mb16px">Card 2</article>
</div>spb6remscroll-padding-bottom: 6rem
바닥에서 60px 떨어진 위치를 스크롤 정렬 기준으로 삼습니다. 높이 60px짜리 고정 하단 바와 짝을 이룹니다.
언제 쓰나
하단 내비게이션 바, 탭 바, 메시지 입력창처럼 스크롤 영역 위에 겹쳐 있는 고정 요소의 높이만큼 확보할 때 씁니다. 값은 그 요소의 실제 높이와 맞추세요.
<!-- Scroll container sitting under a 60px tall fixed 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>사용 예시
고정 하단 바와 모바일 탭 바를 보정하는 기본 형태입니다.
<!-- 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>하단에 입력창이 고정된 채팅 스레드입니다. 특정 메시지로 점프해도 입력창에 가려지지 않습니다.
<!-- Chat thread with a message composer pinned to the bottom -->
<div class="pr h100vh df fdc bg0F0F17">
<!-- The composer is 80px tall, so the thread reserves 8rem at the bottom -->
<div class="spb8rem oya fg1 p2rem">
<article id="msg-101" class="mb16px p16px bg18181B br8px fs14px cA1A1AA">
Earlier message
</article>
<article id="msg-102" class="mb16px p16px bg18181B br8px fs14px cA1A1AA">
Latest message
</article>
</div>
<div class="pa b0 l0 w100p h8rem bt1pxsolid27272A bg0F0F17 df aic gap8px p16px">
<input type="text" class="fg1 py8px px12px br8px b1pxsolid27272A" />
<button class="py8px px16px bg6366F1 cFFFFFF br8px bn cp">Send</button>
</div>
</div>
<!-- Jumping to a message keeps it clear of the composer -->
<script>
document.getElementById('msg-102')
.scrollIntoView({ block: 'end', behavior: 'smooth' });
</script>팁 & 주의사항
스크롤 컨테이너에 걸어야 합니다
scroll-padding-bottom은 스크롤되는 쪽에 붙입니다. 반대로 scroll-margin-bottom은 스크롤 대상에 붙입니다. 아무 효과가 없다면 대개 이 둘을 반대로 쓴 경우입니다.
페이지 전체 스크롤이라면 루트에
별도의 스크롤 상자가 아니라 문서 자체가 스크롤된다면 스크롤 컨테이너는 루트 요소입니다. 이때는 html 요소에 적용해야 하며, 내부 div에 걸면 아무 일도 일어나지 않습니다.
어떤 스크롤에 적용되는지
scrollIntoView, 앵커 링크 이동, 키보드 포커스 이동, 스크롤 스냅처럼 브라우저가 위치를 계산해 주는 스크롤에만 적용됩니다. 사용자가 직접 휠로 굴리는 스크롤에는 영향이 없습니다.
아래쪽 정렬일 때만 체감됩니다
scrollIntoView의 기준이 위쪽 정렬이면 아래쪽 패딩은 드러나지 않습니다. 하단 바 보정이 목적이라면 아래쪽 정렬로 이동시키거나, 스크롤 스냅에서 끝 정렬을 함께 쓰세요.