CSS scroll-padding 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 CSS property is used to control the spacing or padding around the content inside a scrollable container, which affects the scrolling behavior. It allows web developers to define a buffer zone or inset around the scrollable content, ensuring that when users scroll to the edge of the container, they won't immediately reach the end of the content but will encounter the specified padding space instead. This property is particularly useful for improving the user experience when dealing with scrollable elements, preventing content from being obscured by scrollbars or becoming difficult to interact with when positioned too closely to the container's edges.

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.scrollPadding

Interactive Demo

scroll-padding: 0;

scroll-padding: 20px;

scroll-padding: 2em;

Scroll »

Syntax

scroll-padding: 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;
  padding: 40px 0;
  margin: auto;
  border: solid black 2px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-padding: 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;
}

Result

Editor