CSS scroll-padding-left Property

Description

The scroll-padding-left property in CSS is used to set the padding area on the left side of a scroll container. This property is particularly useful in situations where a scroll container has content overflowing its boundaries, and you want to ensure that there is sufficient space between the content and the right edge of the container when scrolling. By using scroll-padding-left, you can define the padding space for the scroll container, ensuring that the content doesn't appear too close to the container's edge during scrolling. This property accepts values in various units, such as pixels, percentages, or other length units, allowing flexibility in specifying the padding size.

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

Interactive Demo

scroll-padding-left: 0;

scroll-padding-left: 20px;

scroll-padding-left: 2em;

Scroll »

Syntax

scroll-padding-left: auto | <length-percentage [0,∞]>>

Values

autoThe offset is determined by the user agent. This will generally be 0px, but the user agent is free to detect and do something else if a non-zero value is more appropriate.
<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: 80%;
  height: 250px;
  aspect-ratio: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
}

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

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

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

Result

Editor