CSS scroll-padding-top 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!

Description

The scroll-padding-top property in CSS allows you to specify the padding that should be applied when scrolling to the top of an element. It determines the spacing between the top edge of a scroll container and the scrolled content when the content is scrolled to the top edge. This property is particularly useful when dealing with scroll snap behavior or scroll anchoring, providing control over the scroll positioning within an element. It helps to create smoother and more visually pleasing scrolling experiences by adjusting the space at the top of the scrolling container.

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

Interactive Demo

1
2
3
Scroll »

Syntax

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

<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>
#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-top: 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;
}

Browser Support

The following table will show you the current browser support for the CSS scroll-padding-top property.

Desktop
Edge Chrome Firefox Opera Safari
7968685614.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
69684814.51069

Last updated by CSSPortal on: 3rd January 2024