AAtomic CSS

scroll-padding

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴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 header compensation (64px header) -->
<html class="sbs spt6-4rem">
  <body>
    <header class="ps t0 l0 w100p h6-4rem bg000000 zi100">
      Fixed header
    </header>
    <main>
      <section id="section1">Section 1</section>
      <section id="section2">Section 2</section>
      <section id="section3">Section 3</section>
    </main>
  </body>
</html>

<!-- Left padding on horizontal scroll container -->
<div class="oxa spl2rem" style="scroll-snap-type: x mandatory">
  <div class="fs0 w100p">Slide 1</div>
  <div class="fs0 w100p">Slide 2</div>
</div>

방향별 적용

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

<!-- Directional scroll-padding -->
<div class="spt6-4rem">64px padding on top (sticky header)</div>
<div class="spr2rem">20px padding on right</div>
<div class="spb16px">16px padding on bottom</div>
<div class="spl16px">16px padding on left</div>

<!-- All directions -->
<div class="sp2rem">20px padding in all directions</div>

팁 & 주의사항

고정 헤더 보정

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

컨테이너에 적용

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

scroll-marginscroll-snap-stopscroll-behavior