CSS scroll-padding-block-end Property

Description

The scroll-padding-block-end CSS property is used to control the spacing or padding at the bottom of a scroll container when it reaches the end of its scrollable content. It helps ensure that the content doesn't get too close to the container's edges, improving the user experience. This property allows web developers to specify a value in pixels, percentages, or other length units to create space at the bottom of the scrollable area, preventing the content from hitting the container's boundary too closely and making it easier to interact with scrollbars or other UI elements.

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

Interactive Demo

scroll-padding-block-end: 0;

scroll-padding-block-end: 20px;

scroll-padding-block-end: 2em;

Scroll »

Syntax

scroll-padding-block-end: 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: 2/1;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding-block-end: 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: end none;
}

Result

Editor