CSS scroll-padding-block 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-block CSS property is used to define the padding area within a scroll container, specifically in the block (vertical) direction. It allows web developers to control the space reserved around the content when scrolling, ensuring that the content is not obscured by any fixed headers or footers. By setting the scroll-padding-block property, you can create a buffer zone, specifying the minimum amount of space that should be maintained between the content and the container's edges during scrolling, improving the user experience by preventing content from being hidden behind other elements. This property helps in creating more predictable and user-friendly scroll behavior within containers.

Initial value: See individual properties
Applies to: scroll containers
Inherited: no
Computed value: See individual properties
Animatable: by computed value type
JavaScript syntax: object.style.scrollPaddingBlock

Interactive Demo

scroll-padding-block: 0;

scroll-padding-block: 20px;

scroll-padding-block: 2em;

Scroll »

Syntax

scroll-padding-block: 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: 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