CSS scroll-padding-inline-end Property

Sets the scroll offset for the end edge in the inline dimension of a scroll container, creating a buffer between the edge and the snapped content.

selector { scroll-padding-inline-end: <length> | <percentage> | auto; }
auto The browser determines an appropriate offset, which is usually 0px.
<length> Defines a fixed distance from the end edge using standard units like px, em, or rem.
<percentage> Defines the offset as a percentage of the width of the scroll container's scrollport.

Code Examples

A basic horizontal scroll container where the items snap to the end edge, leaving a 50px buffer.

<style>
  .scroll-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-end: 50px;
    width: 300px;
    border: 2px solid #333333;
  }
  .item {
    flex: 0 0 200px;
    height: 100px;
    background: #0077ff;
    margin: 10px;
    scroll-snap-align: end;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
<div class="scroll-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

An advanced example showing a gallery with snapping logic and a JavaScript function to dynamically update the scroll-padding-inline-end value.

<style>
  #gallery {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x proximity;
    scroll-padding-inline-end: 20px;
    gap: 15px;
    padding: 20px;
    background: #eeeeee;
  }
  .card {
    min-width: 150px;
    height: 200px;
    background: #ffffff;
    scroll-snap-align: end;
    border: 1px solid #cccccc;
  }
</style>
<div id="gallery">
  <div class="card">A</div>
  <div class="card">B</div>
  <div class="card">C</div>
  <div class="card">D</div>
</div>
<button onclick="adjustPadding()">Increase Offset</button>
<script>
  function adjustPadding() {
    const g = document.getElementById("gallery");
    g.style.scrollPaddingInlineEnd = "100px";
    console.log("New Offset: " + g.style.scrollPaddingInlineEnd);
  }
</script>

Pro Tip

If you have a fixed navigation overlay or a 'floating' scroll button on the right side of your horizontal scroller, set scroll-padding-inline-end to match the width of that UI element. This keeps your snapped items from sliding underneath your buttons, keeping the important content fully visible to the user.

Deep Dive

This property is part of the CSS Scroll Snap module and works specifically on the scroll container. Think of it as a 'parking bumper' for your content. When a user scrolls and the browser snaps an element into place, this property ensures the element doesn't slam right against the trailing edge of the viewable area. Because it is a logical property, 'inline-end' is direction-aware. In a standard 'ltr' (left-to-right) environment, this affects the right side. In an 'rtl' (right-to-left) environment, like Arabic or Hebrew, it automatically flips to the left side without you changing a single line of code. It only takes effect when scroll snapping is active on the container.

Best Practices

Apply this property to the parent container that has 'overflow: scroll' and 'scroll-snap-type' defined. It is most effective in horizontal sliders or carousels where you want the last item to maintain a consistent gutter relative to the container edge, preventing the content from looking cut off or visually cramped against the scrollbar area.

Common Pitfalls

A common mistake is applying this to the child elements instead of the parent container. It belongs on the container. Also, remember that this property does not create actual padding inside the element that affects layout; it only affects the 'snapping' position. If you don't have 'scroll-snap-type' enabled, you won't see this property doing much of anything.

Accessibility

Proper scroll padding ensures that content is not obscured by fixed UI elements or the edges of the browser window. For users with low vision who might use screen magnifiers, having that extra breathing room at the end of a scroll ensures that the focus remains clear and the end of the list is visually distinct.

Dev Data Table: scroll-padding-inline-end property

default auto
animatable yes
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.scrollPaddingInlineEnd = "20px";
js_syntax_2 element.style.setProperty("scroll-padding-inline-end", "20px");
js_note When manipulating this property in JS, the camelCase version is used on the style object, while the hyphenated string is used with setProperty.
browsers { "Chrome": 69, "Edge": 79, "Firefox": 68, "Safari": 14.1, "Opera": 56, "Chrome Android": 69, "Safari on iOS": 14.5, "Samsung Internet": 10.1, "Opera Mobile": 48 }
results render here...