CSS scroll-padding-bottom 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-bottom property in CSS is used to set the minimum amount of space between the content of an element and its bottom scroll boundary. This property is particularly useful when dealing with scrollable elements, such as containers with overflowed content. By specifying a value for scroll-padding-bottom, you can ensure that there is a minimum padding at the bottom of the scrollable area, preventing the content from being too close to the edge when scrolled to the bottom. This can be helpful in enhancing the user experience by providing a more visually pleasing and user-friendly interface. The value of scroll-padding-bottom can be defined in various units, such as pixels, percentages, or other length units. It allows web developers to control the spacing at the bottom of the scrollable area without affecting the layout of the non-scrollable content within the element.

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

Interactive Demo

scroll-padding-bottom: 0;

scroll-padding-bottom: 20px;

scroll-padding-bottom: 2em;

Scroll »

Syntax

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

Result

Editor