CSS scroll-margin-right Property

Sets the margin area on the right side of an element used for scroll snapping, creating an offset between the element and the scroll container edge.

selector { scroll-margin-right: <length>; }
<length> Defines a fixed distance from the right edge of the scroll container using units like px, em, or rem.

Code Examples

A basic horizontal scroll container where each item snaps with a 50px offset from the right edge.

<style>
.scroller {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  width: 350px;
  border: 5px solid #333333;
}
.item {
  flex: 0 0 300px;
  height: 200px;
  background: #0077ff;
  scroll-snap-align: end;
  scroll-margin-right: 50px;
  margin-right: 10px;
}
</style>
<div class="scroller">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

An advanced example using JavaScript to apply a 100px scroll margin to cards in a responsive gallery frame.

<style>
.app-frame {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding: 20px;
  background: #f4f4f4;
}
.card {
  min-width: 80%;
  height: 300px;
  background: #ffffff;
  border: 1px solid #cccccc;
  scroll-snap-align: end;
}
</style>
<div class="app-frame" id="gallery">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
</div>
<script>
const cards = document.querySelectorAll(".card");
// Dynamically set scroll margin if a specific UI condition is met
cards.forEach(card => {
  card.style.scrollMarginRight = "100px";
  card.style.backgroundColor = "#eeeeee";
});
</script>

Pro Tip

When building a horizontal product carousel, use scroll-margin-right on the last item to prevent it from snapping flush against the right edge. This gives your design some breathing room or white space that mimics the padding of the container without messing up the container's total scrollable width calculation.

Deep Dive

Think of scroll-margin-right like a "parking spacer" for your elements. When a user scrolls and the browser snaps an element into place, this property defines an invisible buffer on the right side. It ensures that the element does not just jam itself against the right edge of the viewport or scroll container. This is crucial when you have fixed UI elements like a floating side navigation that might overlap your content. You are telling the browser: "When you snap to this element, leave this much room on the right so the user can see everything clearly." It does not change the actual size of the box or its position in the document flow; it only changes where the scroll snapping logic decides to stop the camera.

Best Practices

Always pair scroll-margin-right with scroll-snap-align and scroll-snap-type. Without those, this property is basically a ghost that does nothing. It is most useful in horizontal layouts where items might be partially obscured by the container's edge. Use relative units like "rem" or "vw" if your layout needs to be responsive across different screen sizes. This ensures your spacing looks good on a phone and a desktop monitor without having to hard-code pixel values for every single breakpoint.

Common Pitfalls

The biggest mistake is confusing this with regular margin-right. Regular margin pushes other elements away; scroll-margin only affects the snapping behavior. Another one is forgetting that the parent must have scroll-snap-type set to something like "x mandatory" or "x proximity." If the snapping system is not turned on, the browser ignores your scroll-margins entirely. Also, remember that it applies to the element being snapped to, not the container itself.

Accessibility

Ensure that horizontal scrolling containers are navigable via keyboard. If you use large scroll margins that hide content or make it hard to reach certain elements via tab navigation, it could frustrate users. Keep the snap points logical so screen reader users and keyboard navigators are not jumping to weird offsets or missing content that is tucked away due to excessive margins.

Dev Data Table: scroll-margin-right property

default 0
animatable no
inherited no
experimental no
year_intro 2018
year_standard 2019
js_syntax_1 element.style.scrollMarginRight = "20px";
js_syntax_2 element.style.setProperty("scroll-margin-right", "20px");
js_note Target this property when you need to adjust scroll offsets dynamically, such as when a user toggles a side panel in a web app.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 68, "Safari": 11, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 11, "Samsung Internet": 10, "Opera Mobile": 48 }
results render here...