CSS scroll-padding-top Property
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
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 68 | 68 | 56 | 14.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
69 | 68 | 48 | 14.5 | 10 | 69 |
Last updated by CSSPortal on: 3rd January 2024