scroll-padding-right
Creates a scroll-only inset on the right side of a scroll container. Items that scroll into view aligned to the end come to rest that far from the right edge. Unlike real padding, the layout itself does not change at all.
Class List
Pattern: spr{value}{unit}
| Class | CSS | Description |
|---|---|---|
spr0 | scroll-padding-right: 0 | No scroll padding |
spr8px | scroll-padding-right: 8px | 8px padding |
spr16px | scroll-padding-right: 16px | 16px padding |
spr2rem | scroll-padding-right: 2rem | 20px padding |
spr4rem | scroll-padding-right: 4rem | 40px padding |
Live Demo
The class goes on the container, not on the cards. Each button jumps the container to its far right, then scrolls the blue card into view aligned to the end. The larger the value, the more room is left on the right.
One value on the container adjusts where every item stops on the right. The gap it leaves also lets the next card peek in, which reads as a cue that there is more to scroll.
Class Details
spr0scroll-padding-right: 0
Resets the scroll padding to zero. Use it to cancel a right inset that a shared class applied, for one specific scroll area.
<!-- 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. The smallest inset that keeps the trailing item's border and focus ring from being clipped. Suits dense horizontal tag bars.
<!-- 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. Set on both sides, it gives the start and end of the scroller the same rhythm as the gaps between cards.
<!-- 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. Leaves a sliver of the next card visible on the right, signalling that the row can be scrolled further.
<!-- 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. Pushes snap positions inward so a floating next arrow or fade overlay on the right edge never covers the trailing card.
<!-- 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>Usage Examples
<!-- 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>Practical example: date strip in a booking UI
Arrow buttons overlap both ends of the scroller. Pairing scroll padding with matching real padding keeps the first and last date fully visible and clickable.
<!-- 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>Pitfalls
It is not layout padding
scroll-padding is a virtual inset used only when computing where scrolling stops. To stop a floating button from physically covering a card, add real padding such as px4rem too.
It pairs with end alignment
A right inset shows up when items align to the right. Use ssae for snapping, or pass inline set to end in script. For a carousel that only aligns to the start, you want scroll-padding-left.
It belongs on the container
Put it on the element that actually scrolls, the one with an overflow class. When an individual card needs the offset instead, use scroll-margin-right.