CSS scroll-padding-right Property

Sets the offset for the right edge of the scrollport's optimal viewing area, ensuring content doesn't snap flush against the container edge.

selector { scroll-padding-right: value; }

auto	The browser determines the padding, usually defaulting to 0px.
<length>	Specifies a fixed distance from the right edge of the scrollport using units like px, em, or rem.
<percentage>	Defines the right padding as a percentage of the scroll container's width.

Code Examples

A basic horizontal scroll container where items snap to the end, leaving a 40px gap on the right side.

<style>
.scroll-box {
  width: 300px;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-right: 40px;
  border: 2px solid #333333;
}
.item {
  flex: 0 0 250px;
  height: 150px;
  scroll-snap-align: end;
  background: #007bff;
  color: #ffffff;
  margin-right: 10px;
}
</style>
<div class="scroll-box">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

An advanced example using JavaScript to dynamically adjust the scroll padding, useful for responsive UI changes.

<style>
#gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  background: #eeeeee;
  height: 200px;
}
.slide {
  flex: 0 0 80%;
  scroll-snap-align: end;
  background: #f06292;
  margin-right: 5px;
}
</style>
<div id="gallery">
  <div class="slide">Slide A</div>
  <div class="slide">Slide B</div>
  <div class="slide">Slide C</div>
</div>
<button onclick="adjustPadding()">Add Right Padding</button>
<script>
function adjustPadding() {
  const g = document.getElementById("gallery");
  g.style.scrollPaddingRight = "100px";
  g.style.backgroundColor = "#cccccc";
}
</script>

Pro Tip

Use this property to account for fixed UI elements like a floating "Next" button or a side navigation menu. By setting the scroll-padding-right to match the width of the overlaying UI, you guarantee that snapped content is never hidden behind your interface elements.

Deep Dive

Think of scroll-padding-right as a "safety buffer" for your scroll container's viewport. When you use scroll snapping, the browser aligns elements to the edges of the container. If you have a horizontal scroller and want some breathing room on the right side of a snapped element, this property tells the browser to treat the viewing area as if it ends earlier than it actually does. It is like telling a camera to frame a shot while keeping a specific margin on the right side of the lens. It does not affect the layout or width of the child items themselves, only how they are positioned relative to the container's right edge after a scroll action concludes.

Best Practices

Apply this property to the parent scroll container, not the individual items. It is best used in horizontal scrolling layouts where scroll-snap-type is active. Use relative units like "rem" or "vw" to ensure the padding scales nicely across different devices and screen sizes, especially if your design relies on consistent gutters.

Common Pitfalls

A common mistake is trying to apply this to child elements; it belongs on the container. Also, remember that it only works if scrolling is actually possible (overflow-x must be set to scroll or auto). If you do not see any effect, verify that your scroll-snap-align property is correctly set on the child elements.

Accessibility

Ensure that the padding does not push content off-screen in a way that makes it inaccessible on small viewports. If the padding is too large, a user might see a significant amount of empty space, potentially confusing them into thinking there is no more content to view.

Dev Data Table: scroll-padding-right property

default	0
animatable	yes
inherited	no
experimental	no
year_intro	2016
year_standard	2019
js_syntax_1	element.style.scrollPaddingRight = "20px";
js_syntax_2	element.style.setProperty("scroll-padding-right", "20px");
js_note	In JavaScript, use the camelCase version scrollPaddingRight for direct style object access.
browsers	{ "Chrome": 69, "Edge": 79, "Firefox": 68, "Safari": 11, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 11, "Samsung Internet": 10.1, "Opera Mobile": 48 }