CSS scroll-padding-inline-start Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The scroll-padding-inline-start CSS property is used to specify the padding space that should be applied on the inline-start side (left side in left-to-right writing modes like English) of a scroll container when it comes to scrolling. It is particularly useful in situations where content is dynamically added or removed within a scrollable element. By setting this property, you can ensure that the content doesn't get hidden or partially obscured by the scrollbars, helping to maintain a visually pleasing and user-friendly scrolling experience.

Initial value: auto
Applies to: scroll containers
Inherited: no
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingInlineStart

Interactive Demo

scroll-padding-inline-start: 0;

scroll-padding-inline-start: 20px;

scroll-padding-inline-start: 2em;

Scroll »

Syntax

scroll-padding-inline-start: auto | &tl;length-percentage [0,∞]>

Values

autoThe offset is determined by the user agent. This will generally be 0px, but a user agent is able to detect and do something else if a non-zero value is more appropriate.
&tl;length-percentage>An inwards offset from the corresponding edge of the scrollport, as a valid length or a percentage.

Example

HTML

<div id="container">

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

  <div class="green"></div>

  <div class="blue"></div>

</div>

CSS

#container {
  width: 60%;
  aspect-ratio: 3/2;
  padding: 0 40px;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding-inline-start: 20px;
}

.blue {
  background-color: lightblue;
  height: 95%;
  aspect-ratio: 5/3;
}

.green {
  background-color: lightgreen;
  height: 80%;
  aspect-ratio: 5/4;
}

.blue, .green {
  display: inline-block;
  margin: 2px;
  scroll-snap-align: none start;
}

Result

Editor