AAtomic CSS

scroll-padding

스크롤 스냅 컨테이너의 스냅 영역에 패딩을 추가합니다. 고정 헤더 뒤에 스냅된 항목이 숨지 않도록 오프셋을 지정할 때 유용합니다. 예를 들어 64px 높이의 sticky 헤더가 있다면 spt6-4rem을 사용합니다.

클래스 목록

패턴CSS설명
sp{N}pxscroll-padding: {N}px전체 방향 scroll-padding
spt{N}pxscroll-padding-top: {N}px상단 scroll-padding
spr{N}pxscroll-padding-right: {N}px우측 scroll-padding
spb{N}pxscroll-padding-bottom: {N}px하단 scroll-padding
spl{N}pxscroll-padding-left: {N}px좌측 scroll-padding

사용 예시

sticky 헤더가 있는 레이아웃에서 scroll-padding-top으로 스냅 위치를 보정합니다.

<!-- sticky 헤더 보정 (64px 헤더) -->
<html class="sbs spt6-4rem">
  <body>
    <header class="ps t0 l0 w100p h6-4rem bg000000 zi100">
      고정 헤더
    </header>
    <main>
      <section id="section1">섹션 1</section>
      <section id="section2">섹션 2</section>
      <section id="section3">섹션 3</section>
    </main>
  </body>
</html>

<!-- 가로 스크롤 컨테이너에 좌측 패딩 -->
<div class="oxa spl2rem" style="scroll-snap-type: x mandatory">
  <div class="fs0 w100p">슬라이드 1</div>
  <div class="fs0 w100p">슬라이드 2</div>
</div>

방향별 적용

상하좌우 개별적으로 scroll-padding을 지정할 수 있습니다.

<!-- 방향별 scroll-padding -->
<div class="spt6-4rem">상단에 64px 패딩 (sticky 헤더)</div>
<div class="spr2rem">우측에 20px 패딩</div>
<div class="spb16px">하단에 16px 패딩</div>
<div class="spl16px">좌측에 16px 패딩</div>

<!-- 전체 방향 -->
<div class="sp2rem">모든 방향에 20px 패딩</div>

팁 & 주의사항

고정 헤더 보정

sticky 헤더 높이에 맞춰 spt를 설정하면 스크롤 스냅이나 앵커 이동 시 콘텐츠가 헤더 뒤에 숨지 않습니다. 64px 헤더 → spt6-4rem.

컨테이너에 적용

scroll-padding은 스크롤 컨테이너에 적용합니다. 자식 요소의 스냅 위치를 조정하려면 scroll-margin을 사용하세요.

scroll-marginscroll-snap-stopscroll-behavior