CSS scroll-padding-block-start Property

Description

The scroll-padding-block-start CSS property is used to define the amount of padding that should be applied to the start of a scroll container in a block dimension (typically, the vertical direction). This padding effectively reserves space within the container, ensuring that the content doesn't get too close to the container's edge when scrolled. It helps improve the user experience by preventing content from being obscured by scrollbars or other user interface elements. This property is particularly useful when working with scrollable elements like divs or iframes, allowing web developers to control the spacing at the beginning of the scrollable content.

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

Interactive Demo

scroll-padding-block-start: 0;

scroll-padding-block-start: 20px;

scroll-padding-block-start: 2em;

Scroll »

Syntax

scroll-padding-block-start: auto | <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.
<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%;
  aspect-ratio: 3/1;
  padding: 40px 0;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-block-start: 20px;
}

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

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

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

Result

Editor