scroll-margin-left
요소가 스크롤되어 화면에 들어올 때, 요소의 왼쪽에 확보할 여백을 지정합니다. 앵커 링크 이동, scrollIntoView 호출, 스크롤 스냅에서 최종 정지 위치를 왼쪽으로 그만큼 밀어냅니다. 요소의 실제 레이아웃에는 아무 영향도 주지 않습니다.
클래스 목록
패턴: sml{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
sml0 | scroll-margin-left: 0 | 스크롤 여백 없음 |
sml8px | scroll-margin-left: 8px | 8px 여백 |
sml16px | scroll-margin-left: 16px | 16px 여백 |
sml2rem | scroll-margin-left: 2rem | 20px 여백 |
sml4rem | scroll-margin-left: 4rem | 40px 여백 |
라이브 데모
버튼을 누르면 컨테이너를 처음으로 되돌린 뒤 파란 카드를 왼쪽 정렬로 스크롤해 옵니다. 클래스에 따라 카드가 왼쪽 가장자리에서 얼마나 떨어져 멈추는지 비교해 보세요.
sml0이면 카드가 컨테이너 안쪽 왼쪽 모서리에 딱 붙고, sml4rem이면 40px 떨어진 곳에 멈춥니다. 카드의 크기나 위치 자체는 전혀 변하지 않습니다.
클래스별 상세
sml0scroll-margin-left: 0
스크롤 여백을 0으로 되돌립니다. 상위 규칙이나 공통 컴포넌트에서 여백이 지정된 상태에서 특정 카드만 가장자리에 딱 붙여야 할 때 사용합니다.
<!-- Reset an inherited offset for one card -->
<div class="sstxm df oxa gap16px">
<div class="ssas sml2rem fs0 w28rem">Card 1</div>
<div class="ssas sml0 fs0 w28rem">Flush against the edge</div>
</div>sml8pxscroll-margin-left: 8px
8px. 테두리나 포커스 링이 잘려 보이지 않을 정도의 최소 여백입니다. 칩·태그처럼 작은 항목이 촘촘히 놓인 가로 목록에 적합합니다.
<!-- Chip row: just enough to clear the hairline border -->
<div class="sstxm df oxa gap8px">
<button class="ssas sml8px fs0 py8px px16px">All</button>
<button class="ssas sml8px fs0 py8px px16px">Design</button>
</div>sml16pxscroll-margin-left: 16px
16px. 카드 사이 간격을 16px로 잡은 캐러셀에서 첫 카드의 왼쪽 여백을 카드 간격과 똑같이 맞출 때 씁니다.
<!-- Card gutter that matches the 16px gap between cards -->
<div class="sstxm df oxa gap16px">
<article class="ssas sml16px fs0 w28rem">Card 1</article>
<article class="ssas sml16px fs0 w28rem">Card 2</article>
</div>sml2remscroll-margin-left: 2rem
20px. 컨테이너의 좌우 패딩이 20px인 레이아웃에서, 스냅된 카드의 왼쪽 선을 제목이나 본문 텍스트의 시작선과 일치시킵니다.
<!-- Match the container padding so snapped cards line up with the header -->
<section class="px2rem">
<h2>Featured</h2>
<div class="sstxm df oxa gap16px">
<article class="ssas sml2rem fs0 w28rem">Card 1</article>
<article class="ssas sml2rem fs0 w28rem">Card 2</article>
</div>
</section>sml4remscroll-margin-left: 4rem
40px. 스크롤 영역 왼쪽에 고정된 레일, 아이콘 바, 인디케이터가 있어 그만큼을 비워 둬야 할 때 사용합니다.
<!-- Clear a 40px sticky rail pinned to the left of the scroller -->
<div class="pr">
<div class="pa t0 l0 w4rem h100p">Rail</div>
<div class="sstxm df oxa gap16px">
<article class="ssas sml4rem fs0 w28rem">Card 1</article>
<article class="ssas sml4rem fs0 w28rem">Card 2</article>
</div>
</div>사용 예시
<!-- Left margin in horizontal scroll snap -->
<div class="sstxm df oxa gap16px">
<div class="ssas sml2rem fs0 w28rem bg18181B p2rem br8px">Card 1</div>
<div class="ssas sml2rem fs0 w28rem bg18181B p2rem br8px">Card 2</div>
<div class="ssas sml2rem fs0 w28rem bg18181B p2rem br8px">Card 3</div>
</div>실전 예시: 가로 단계 내비게이션
점 내비게이션의 앵커 링크로 각 단계를 불러올 때, scroll-margin-left가 없으면 섹션이 컨테이너 왼쪽 모서리에 딱 붙어 답답해 보입니다.
<!-- Horizontal step navigation: clicking a dot brings the step into view
with breathing room on its left instead of flush against the edge -->
<nav class="df gap8px mb16px">
<a href="#step-1" class="w12px h12px br999px bg6366F1"></a>
<a href="#step-2" class="w12px h12px br999px bg27272A"></a>
<a href="#step-3" class="w12px h12px br999px bg27272A"></a>
</nav>
<div class="sstxm df oxa gap16px">
<section id="step-1" class="ssas sml2rem fs0 w30rem p2rem bg18181B br8px">
<h3>1. Account</h3>
</section>
<section id="step-2" class="ssas sml2rem fs0 w30rem p2rem bg18181B br8px">
<h3>2. Payment</h3>
</section>
<section id="step-3" class="ssas sml2rem fs0 w30rem p2rem bg18181B br8px">
<h3>3. Confirm</h3>
</section>
</div>주의사항
스크롤로 들어올 때만 의미가 있습니다
scroll-margin은 앵커 이동, scrollIntoView, 스크롤 스냅처럼 브라우저가 요소를 화면에 맞춰 줄 때만 계산됩니다. 사용자가 직접 스크롤할 때나 일반 레이아웃에는 아무 영향이 없습니다.
margin은 항목에, padding은 컨테이너에
scroll-margin-left는 개별 항목에 붙이고, scroll-padding-left는 스크롤 컨테이너에 붙입니다. 모든 항목에 같은 여백이 필요하면 컨테이너에 scroll-padding 한 번이 더 간단합니다.
부드럽게 움직이려면 scroll-behavior가 필요합니다
scroll-margin은 최종 위치만 정합니다. 이동이 튀지 않게 하려면 스크롤 컨테이너에 scroll-behavior: smooth를 함께 지정하세요.