scroll-margin-right
요소가 스크롤되어 화면에 들어올 때, 요소의 오른쪽에 확보할 여백을 지정합니다. 끝 정렬로 스냅하거나 scrollIntoView의 inline을 end로 호출할 때 정지 위치가 그만큼 왼쪽으로 밀립니다. 요소의 실제 레이아웃에는 아무 영향도 주지 않습니다.
클래스 목록
패턴: smr{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
smr0 | scroll-margin-right: 0 | 스크롤 여백 없음 |
smr8px | scroll-margin-right: 8px | 8px 여백 |
smr16px | scroll-margin-right: 16px | 16px 여백 |
smr2rem | scroll-margin-right: 2rem | 20px 여백 |
smr4rem | scroll-margin-right: 4rem | 40px 여백 |
라이브 데모
버튼을 누르면 컨테이너를 맨 오른쪽으로 보낸 뒤 파란 카드를 끝 정렬로 스크롤해 옵니다. 클래스에 따라 카드가 오른쪽 가장자리에서 얼마나 떨어져 멈추는지 비교해 보세요.
smr0이면 카드가 컨테이너 안쪽 오른쪽 모서리에 딱 붙고, smr4rem이면 40px 떨어진 곳에 멈춥니다. 카드의 크기나 위치 자체는 전혀 변하지 않습니다.
클래스별 상세
smr0scroll-margin-right: 0
스크롤 여백을 0으로 되돌립니다. 공통 컴포넌트에서 여백이 지정된 상태에서 특정 카드만 오른쪽 가장자리에 딱 붙여야 할 때 사용합니다.
<!-- Reset an inherited offset for one card -->
<div class="sstxm df oxa gap16px">
<div class="ssae smr2rem fs0 w28rem">Card 1</div>
<div class="ssae smr0 fs0 w28rem">Flush against the right edge</div>
</div>smr8pxscroll-margin-right: 8px
8px. 끝 정렬 시 테두리와 포커스 링이 잘리지 않을 정도의 최소 여백입니다. 태그·칩이 촘촘한 가로 목록에 적합합니다.
<!-- Tag row aligned to the end: keep the focus ring visible -->
<div class="sstxm df oxa gap8px">
<button class="ssae smr8px fs0 py8px px16px">CSS</button>
<button class="ssae smr8px fs0 py8px px16px">Layout</button>
</div>smr16pxscroll-margin-right: 16px
16px. 카드 간격이 16px인 캐러셀에서 마지막 카드의 오른쪽 여백을 카드 간격과 동일하게 맞춥니다.
<!-- End-aligned carousel with a 16px rhythm -->
<div class="sstxm df oxa gap16px">
<article class="ssae smr16px fs0 w28rem">Card 1</article>
<article class="ssae smr16px fs0 w28rem">Card 2</article>
</div>smr2remscroll-margin-right: 2rem
20px. 컨테이너 좌우 패딩이 20px인 레이아웃에서, 끝 정렬된 카드의 오른쪽 선을 본문 텍스트의 끝선과 일치시킵니다.
<!-- Match the container padding so the last card is not glued to the edge -->
<section class="px2rem">
<div class="sstxm df oxa gap16px">
<article class="ssae smr2rem fs0 w28rem">Card 1</article>
<article class="ssae smr2rem fs0 w28rem">Card 2</article>
</div>
</section>smr4remscroll-margin-right: 4rem
40px. 오른쪽에 떠 있는 다음 버튼, 라이브 배지, 그라데이션 페이드 같은 오버레이가 카드를 가리지 않도록 비워 둡니다.
<!-- Keep a floating "next" button on the right from covering the card -->
<div class="pr">
<button class="pa r0 t50p w4rem h4rem br999px">Next</button>
<div class="sstxm df oxa gap16px">
<article class="ssae smr4rem fs0 w28rem">Card 1</article>
<article class="ssae smr4rem fs0 w28rem">Card 2</article>
</div>
</div>사용 예시
<!-- Right margin in horizontal scroll snap -->
<div class="sstxm df oxa gap16px">
<div class="ssae smr2rem fs0 w28rem bg18181B p2rem br8px">Card 1</div>
<div class="ssae smr2rem fs0 w28rem bg18181B p2rem br8px">Card 2</div>
<div class="ssae smr2rem fs0 w28rem bg18181B p2rem br8px">Card 3</div>
</div>실전 예시: 타임라인 스크러버
최신 항목으로 이동 버튼이 가장 최근 기록을 오른쪽 끝으로 데려올 때, scroll-margin-right가 우측 상단 배지 아래로 카드가 숨는 것을 막아 줍니다.
<!-- Timeline scrubber. Jumping to the latest entry brings it to the
right edge, and smr4rem keeps it clear of the floating live badge -->
<div class="pr">
<span class="pa r16px t16px py4px px12px br999px bg22C55E cFFFFFF">LIVE</span>
<div id="timeline" class="sstxm df oxa gap16px p16px">
<article class="ssae smr4rem fs0 w24rem p16px bg18181B br8px">09:00</article>
<article class="ssae smr4rem fs0 w24rem p16px bg18181B br8px">10:00</article>
<article id="latest" class="ssae smr4rem fs0 w24rem p16px bg18181B br8px">
11:00 (latest)
</article>
</div>
</div>
<script>
document.getElementById('latest')
.scrollIntoView({ behavior: 'smooth', inline: 'end' });
</script>주의사항
스크롤로 들어올 때만 의미가 있습니다
scroll-margin은 앵커 이동, scrollIntoView, 스크롤 스냅처럼 브라우저가 요소를 화면에 맞춰 줄 때만 계산됩니다. 사용자가 직접 스크롤할 때나 일반 레이아웃에는 아무 영향이 없습니다.
끝 정렬과 짝을 이룹니다
오른쪽 여백은 요소가 오른쪽 기준으로 정렬될 때만 눈에 보입니다. 스냅이라면 ssae, 스크립트라면 inline 옵션을 end로 호출해야 효과를 확인할 수 있습니다.
모든 항목에 같은 값이면 컨테이너 쪽이 낫습니다
항목마다 smr2rem을 반복하는 대신 스크롤 컨테이너에 spr2rem을 한 번 주면 같은 결과를 더 적은 클래스로 얻습니다.