AAtomic CSS

scroll-margin

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

클래스 목록

<tr> <th class="tal py12px px16px bg18181B bb2pxsolid27272A cA1A1AA fw600 ttu fs12px ls0-05em">패턴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

사용 예시

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

<!-- Apply scroll-margin to snap items -->
<div class="oxa df" style="scroll-snap-type: x mandatory">
  <div class="sml16px fs0 w100p">Item 1</div>
  <div class="sml16px fs0 w100p">Item 2</div>
  <div class="sml16px fs0 w100p">Item 3</div>
</div>

<!-- Top margin in vertical scroll -->
<div class="oya h30rem" style="scroll-snap-type: y mandatory">
  <section class="smt2rem h30rem">Section 1</section>
  <section class="smt2rem h30rem">Section 2</section>
</div>

방향별 적용

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

<!-- Directional scroll-margin -->
<div class="smt16px">16px margin on top</div>
<div class="smr2rem">20px margin on right</div>
<div class="smb8px">8px margin on bottom</div>
<div class="sml12px">12px margin on left</div>

<!-- All directions -->
<div class="sm2rem">20px margin in all directions</div>

팁 & 주의사항

scroll-margin vs scroll-padding

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

단위 규칙

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

scroll-paddingscroll-snap-stopscroll-behavior