scroll-margin-right
Sets the space to keep on the right of an element when it is scrolled into view. When an element snaps to the end, or scrollIntoView is called with inline set to end, the resting position shifts left by that amount. The element's actual layout is unaffected.
Class List
Pattern: smr{value}{unit}
| Class | CSS | Description |
|---|---|---|
smr0 | scroll-margin-right: 0 | No scroll margin |
smr8px | scroll-margin-right: 8px | 8px margin |
smr16px | scroll-margin-right: 16px | 16px margin |
smr2rem | scroll-margin-right: 2rem | 20px margin |
smr4rem | scroll-margin-right: 4rem | 40px margin |
Live Demo
Each button jumps the container to its far right, then scrolls the blue card into view aligned to the end. Compare how far the card stops from the right edge for each class.
With smr0 the card sits flush against the inner right edge; with smr4rem it stops 40px away. The card's own size and position never change.
Class Details
smr0scroll-margin-right: 0
Resets the scroll margin to zero. Use it when a shared component already sets an offset and one particular card should sit flush against the right edge.
<!-- 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. The smallest offset that keeps borders and focus rings from being clipped on end alignment. Suits dense horizontal rows of tags and chips.
<!-- 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. Matches a carousel with 16px gaps so the trailing card gets the same breathing room as the gaps between cards.
<!-- 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. In a layout with 20px horizontal container padding, this lines the end-aligned card up with the right edge of the body text.
<!-- 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. Keeps a floating next button, live badge, or fade overlay on the right from covering the card that was just scrolled in.
<!-- 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>Usage Examples
<!-- 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>Practical example: timeline scrubber
When a jump-to-latest control brings the newest entry to the right edge, scroll-margin-right stops the card from disappearing under the badge pinned in the corner.
<!-- 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>Pitfalls
It only applies when something scrolls the element into view
scroll-margin is consulted for anchor navigation, scrollIntoView, and scroll snapping. Manual scrolling and ordinary layout are completely unaffected.
It pairs with end alignment
A right offset is only visible when the element is aligned to the right. Use ssae for snapping, or pass inline set to end when calling scrollIntoView.
Prefer the container when every item shares the value
Instead of repeating smr2rem on every item, put spr2rem on the scroll container once for the same result with fewer classes.