CSS scroll-padding Property

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