CSS scroll-padding-inline-start Property

This property sets the offset distance for the start edge of the inline axis within a scroll container's snap area.

selector { scroll-padding-inline-start: value; }
auto The browser determines the scroll padding, which usually defaults to 0px.
<length> Sets a fixed distance using units such as px, em, or rem.
<percentage> Determines the offset as a percentage of the scroll container's width in the inline direction.

Code Examples

A basic horizontal scroll container where each snapped item is offset by 40px from the start edge.

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

An advanced example showing how to manipulate the scroll snap offset dynamically using JavaScript.

<style>
#gallery {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
  gap: 10px;
  padding: 10px;
  background: #eeeeee;
}
.photo {
  flex: 0 0 80%;
  height: 200px;
  background: #666666;
  scroll-snap-align: start;
}
</style>
<div id="gallery">
  <div class="photo"></div>
  <div class="photo"></div>
  <div class="photo"></div>
</div>
<button onclick="adjustPadding()">Increase Offset</button>
<script>
function adjustPadding() {
  const container = document.getElementById("gallery");
  container.style.scrollPaddingInlineStart = "60px";
}
</script>

Pro Tip

You can use this property to dynamically account for UI elements like sidebars that might slide in and out. By updating this value, you ensure that snapped content is always centered or offset correctly regardless of the UI state.

Deep Dive

Think of this property as a buffer zone for your scroll snapping. When a user scrolls and the browser snaps to an element, this property tells the container to leave some breathing room at the start of the inline direction. In a standard left-to-right layout, this means the left side. Because it is a logical property, if your site switches to a right-to-left language, the padding automatically flips to the right side. It ensures that the snapped element does not hug the edge of the viewport like a nervous driver hugging the curb. It is part of the scroll snap module, specifically controlling the 'optimal viewing area' of the scroll port.

Best Practices

Use logical properties like this one instead of physical properties like scroll-padding-left to make your layouts more compatible with internationalization. Always ensure the parent container has scroll-snap-type defined, otherwise this property will have no visible effect.

Common Pitfalls

A common mistake is applying this property to the child elements instead of the scroll container. It must be defined on the parent element that has the overflow and scroll-snap-type. Also, if you do not have scroll-snap-align set on the children, you will not see the snapping behavior occur.

Accessibility

Properly setting scroll padding prevents content from being hidden behind fixed-position headers or navigation bars when a user navigates via anchor links or keyboard scrolling. It provides a better visual anchor point for users with cognitive disabilities who need clear focus on the content.

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

default 0
animatable yes
inherited no
experimental no
year_intro 2018
year_standard 2021
js_syntax_1 element.style.scrollPaddingInlineStart = "20px";
js_syntax_2 element.style.setProperty("scroll-padding-inline-start", "20px");
js_note Ensure you use the camelCase version of the property name when accessing it directly through the style object in JavaScript.
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...