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
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
<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;
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;
}
Browser Support
The following table will show you the current browser support for the CSS scroll-padding
property.
Desktop | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
79 | 69 | 68 | 56 | 14.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
69 | 68 | 48 | 14.5 | 10 | 69 |
Last updated by CSSPortal on: 3rd January 2024