CSS scroll-padding-inline Property

Sets the scroll offset for the start and end sides of a scroll container in the inline dimension.

selector { scroll-padding-inline: <value> | [ <length-percentage> [ <length-percentage> ] ]; }
auto The browser determines the offset, which usually defaults to 0px.
<length> Defines a fixed offset using standard units like px, em, rem, or vw.
<percentage> Defines the offset as a percentage of the scroll container's inline size.

Code Examples

A basic horizontal scroll container using scroll-snap-type and scroll-padding-inline to ensure items snap 40px away from the container edges.

<style>
  .scroll-box {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 40px;
    width: 300px;
    border: 2px solid #333333;
  }
  .item {
    flex: 0 0 80%;
    height: 150px;
    margin: 10px;
    scroll-snap-align: start;
    background: #0077ff;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
  }
</style>
<div class="scroll-box">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

An advanced example using JavaScript to dynamically adjust the scroll-padding-inline property on a gallery container.

<style>
  #gallery {
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    gap: 20px;
    background: #eeeeee;
    padding: 20px;
  }
  .card {
    min-width: 250px;
    height: 200px;
    background: #ffffff;
    scroll-snap-align: start;
    border-radius: 8px;
    box-shadow: 0 4px 6px #0000001a;
  }
</style>
<div id="gallery">
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
  <div class="card"></div>
</div>
<script>
  const gallery = document.getElementById("gallery");
  function updatePadding(amount) {
    gallery.style.scrollPaddingInline = amount + "px";
    console.log("New Scroll Padding: " + gallery.style.scrollPaddingInline);
  }
  // Example: Dynamically adjust buffer based on application state
  updatePadding(50);
</script>

Pro Tip

If you are building a horizontal gallery with scroll snapping, set scroll-padding-inline to a value like 10% or 20%. This keeps the current item centered or slightly offset so the user can clearly see that there is more content waiting on either side of the current view.

Deep Dive

Think of scroll-padding-inline as a safety buffer for your scroll position. When you use scroll snapping or link to an internal anchor, the browser usually puts the target element right against the edge of the container. This property tells the browser to leave some breathing room on the inline sides (the left and right in a standard horizontal layout). Because it is a logical property, it respects the writing-mode of your document. If your text runs left-to-right, it handles the left and right. If your text runs vertically, it maps to the top and bottom. It is a shorthand that lets you set both scroll-padding-inline-start and scroll-padding-inline-end in one go. If you provide one value, it applies to both sides. If you provide two, the first is for the start and the second is for the end.

Best Practices

Apply this property to the scroll container, not the individual items inside it. It is best used in conjunction with scroll-snap-type to ensure that items do not snap directly against the edge of the viewport, which can look cramped. Use relative units like rem or vw so the spacing stays proportional to the user's font size or screen width. This is especially useful when you have persistent UI elements, like a floating side menu, that might otherwise overlap your content when a user jumps to a section via an anchor link.

Common Pitfalls

A common mistake is trying to apply this to the child elements. Remember, this property belongs on the parent container that has the overflow: scroll or overflow: auto rule. Also, do not confuse this with regular padding; regular padding affects the actual layout and size of the box, whereas scroll-padding only affects where the scrollbar or snap-point lands visually.

Accessibility

Setting proper scroll padding is great for accessibility because it ensures that when a user navigates via keyboard (using Tab) or screen reader, the focused element is fully visible and not partially obscured by fixed headers or sidebars. It prevents the 'hidden focus' problem where a browser jumps to an element but hides it behind a sticky navigation bar.

Dev Data Table: scroll-padding-inline property

default auto
animatable no
inherited no
experimental no
year_intro 2018
year_standard 2019
js_syntax_1 element.style.scrollPaddingInline
js_syntax_2 element.style.setProperty("scroll-padding-inline", "20px")
js_note In JavaScript, use camelCase for direct style access or the string property name when using the setProperty method.
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...