scroll-padding-right
스크롤 컨테이너 안쪽 오른쪽에 스크롤 전용 여백을 만듭니다. 그 컨테이너 안의 요소가 끝 정렬로 스크롤되어 들어올 때 오른쪽 가장자리에서 그만큼 떨어져 멈춥니다. 실제 패딩과 달리 레이아웃은 전혀 바뀌지 않습니다.
클래스 목록
패턴: spr{값}{단위}
| 클래스 | CSS | 설명 |
|---|---|---|
spr0 | scroll-padding-right: 0 | 스크롤 패딩 없음 |
spr8px | scroll-padding-right: 8px | 8px 패딩 |
spr16px | scroll-padding-right: 16px | 16px 패딩 |
spr2rem | scroll-padding-right: 2rem | 20px 패딩 |
spr4rem | scroll-padding-right: 4rem | 40px 패딩 |
라이브 데모
클래스는 카드가 아니라 컨테이너에 붙습니다. 버튼을 누르면 컨테이너를 맨 오른쪽으로 보낸 뒤 파란 카드를 끝 정렬로 스크롤해 옵니다. 값이 커질수록 오른쪽에 더 넓은 자리가 남습니다.
컨테이너 값 하나로 모든 항목의 오른쪽 정지 위치가 함께 조정됩니다. 오른쪽에 남는 틈으로 다음 카드가 살짝 보이면 더 스크롤할 수 있다는 신호가 되기도 합니다.
클래스별 상세
spr0scroll-padding-right: 0
스크롤 패딩을 0으로 되돌립니다. 공통 클래스에서 지정된 오른쪽 여백을 특정 스크롤 영역에서만 없앨 때 사용합니다.
<!-- Explicit default: end-aligned cards touch the container edge -->
<div class="spr0 sstxm df oxa gap16px">
<div class="ssae fs0 w28rem">Card 1</div>
<div class="ssae fs0 w28rem">Card 2</div>
</div>spr8pxscroll-padding-right: 8px
8px. 마지막 항목의 테두리와 포커스 링이 잘리지 않을 최소 여백입니다. 태그 바처럼 촘촘한 가로 목록에 적합합니다.
<!-- Tag bar: a hair of inset so the trailing border is never clipped -->
<div class="spr8px sstxm df oxa gap8px py8px">
<button class="ssae fs0 py8px px16px br999px">CSS</button>
<button class="ssae fs0 py8px px16px br999px">Layout</button>
</div>spr16pxscroll-padding-right: 16px
16px. 좌우 양쪽에 같은 값을 주면 스크롤 영역의 시작과 끝 여백이 카드 간격과 동일한 리듬으로 맞습니다.
<!-- Same 16px rhythm on both ends of the scroller -->
<div class="spl16px spr16px sstxm df oxa gap16px">
<article class="ssas fs0 w28rem">Card 1</article>
<article class="ssas fs0 w28rem">Card 2</article>
</div>spr2remscroll-padding-right: 2rem
20px. 오른쪽에 살짝 틈을 남겨 다음 카드가 엿보이게 함으로써, 가로로 더 스크롤할 수 있다는 사실을 시각적으로 알립니다.
<!-- Leave a peek of the next card so the row reads as scrollable -->
<div class="spr2rem sstxm df oxa gap16px">
<article class="ssas fs0 w28rem">Card 1</article>
<article class="ssas fs0 w28rem">Card 2</article>
<article class="ssas fs0 w28rem">Card 3</article>
</div>spr4remscroll-padding-right: 4rem
40px. 오른쪽 끝에 떠 있는 다음 화살표 버튼이나 그라데이션 페이드가 마지막 카드를 가리지 않도록 스냅 위치를 안쪽으로 밀어냅니다.
<!-- A 40px next arrow floats over the right edge of the scroller -->
<div class="pr">
<button class="pa r0 t50p w4rem h4rem br999px bn cp">Next</button>
<div class="spr4rem sstxm df oxa gap16px">
<article class="ssae fs0 w28rem">Card 1</article>
<article class="ssae fs0 w28rem">Card 2</article>
</div>
</div>사용 예시
<!-- Right inset on a horizontal scroll container -->
<div class="spr2rem sstxm df oxa gap16px">
<div class="ssae fs0 w28rem bg18181B p2rem br8px">Card 1</div>
<div class="ssae fs0 w28rem bg18181B p2rem br8px">Card 2</div>
<div class="ssae fs0 w28rem bg18181B p2rem br8px">Card 3</div>
</div>실전 예시: 예약 UI의 날짜 스트립
좌우 화살표 버튼이 스크롤 영역 양 끝에 겹쳐 있는 구성입니다. 스크롤 패딩과 실제 패딩을 함께 주어야 첫 날짜와 마지막 날짜가 버튼에 가려지지 않고 그대로 클릭됩니다.
<!-- Date strip in a booking UI. Arrow buttons overlap both ends of the
scroller, so the container is inset on both sides and the layout
padding matches, keeping the first and last day fully clickable. -->
<div class="pr">
<button class="pa l0 t50p w4rem h4rem br999px bn bg18181B cFAFAFA cp">Prev</button>
<button class="pa r0 t50p w4rem h4rem br999px bn bg18181B cFAFAFA cp">Next</button>
<div class="spl4rem spr4rem px4rem sstxm obxc swn df oxa gap8px py12px">
<button class="ssas fs0 w8rem h8rem br8px bn bg18181B cFAFAFA cp">
Mon 12
</button>
<button class="ssas fs0 w8rem h8rem br8px bn bg18181B cFAFAFA cp">
Tue 13
</button>
<button class="ssas fs0 w8rem h8rem br8px bn bg6366F1 cFFFFFF cp">
Wed 14
</button>
</div>
</div>주의사항
레이아웃 패딩이 아닙니다
scroll-padding은 스크롤 정지 위치 계산에만 쓰이는 가상의 여백입니다. 버튼이 카드를 물리적으로 덮는 문제까지 막으려면 px4rem 같은 실제 padding을 함께 지정해야 합니다.
끝 정렬과 짝을 이룹니다
오른쪽 여백은 요소가 오른쪽 기준으로 정렬될 때 드러납니다. 스냅이라면 ssae, 스크립트라면 inline 옵션을 end로 호출하세요. 시작 정렬만 쓰는 캐러셀이라면 필요한 것은 scroll-padding-left입니다.
컨테이너에만 적용됩니다
overflow가 걸려 실제로 스크롤되는 요소에 붙여야 합니다. 개별 카드에 여백이 필요하다면 scroll-margin-right를 쓰세요.