AAtomic CSS

scroll-margin

스크롤 스냅 시 요소의 스냅 위치에 오프셋(여백)을 추가합니다. 일반 margin처럼 상하좌우를 개별 지정할 수 있으며, 스냅 포인트의 정렬을 미세 조정할 때 사용합니다.

클래스 목록

패턴CSS설명
sm{N}pxscroll-margin: {N}px전체 방향 scroll-margin
smt{N}pxscroll-margin-top: {N}px상단 scroll-margin
smr{N}pxscroll-margin-right: {N}px우측 scroll-margin
smb{N}pxscroll-margin-bottom: {N}px하단 scroll-margin
sml{N}pxscroll-margin-left: {N}px좌측 scroll-margin

사용 예시

스크롤 스냅 아이템에 여백을 추가하여 스냅 위치를 조정합니다.

<!-- 스냅 아이템에 scroll-margin 적용 -->
<div class="oxa df" style="scroll-snap-type: x mandatory">
  <div class="sml16px fs0 w100p">아이템 1</div>
  <div class="sml16px fs0 w100p">아이템 2</div>
  <div class="sml16px fs0 w100p">아이템 3</div>
</div>

<!-- 세로 스크롤에서 상단 여백 -->
<div class="oya h30rem" style="scroll-snap-type: y mandatory">
  <section class="smt2rem h30rem">섹션 1</section>
  <section class="smt2rem h30rem">섹션 2</section>
</div>

방향별 적용

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

<!-- 방향별 scroll-margin -->
<div class="smt16px">상단에 16px 여백</div>
<div class="smr2rem">우측에 20px 여백</div>
<div class="smb8px">하단에 8px 여백</div>
<div class="sml12px">좌측에 12px 여백</div>

<!-- 전체 방향 -->
<div class="sm2rem">모든 방향에 20px 여백</div>

팁 & 주의사항

scroll-margin vs scroll-padding

scroll-margin은 스냅 자식 요소에 적용하고, scroll-padding은 스크롤 컨테이너에 적용합니다. 둘 다 스냅 위치를 조정하지만 적용 대상이 다릅니다.

단위 규칙

20px 미만은 px(예: sm16px), 20px 이상은 rem(예: sm2rem)을 사용합니다.

scroll-paddingscroll-snap-stopscroll-behavior