scroll-padding
is part of the CSS Scroll Snap Module. Scroll snapping refers to “locking” the position of the viewport to specific elements on the page as the window (or a scrollable container) is scrolled. Think of a scroll-snapping container like putting a magnet on top of an element that sticks to the top of the viewport and forces the page to stop scrolling right there.
scroll-padding
is an optional property for any scroll-snapping container. Scroll-snapping containers are defined whenever the scroll-snap-type
property is set to any value besides none
. For more information on scroll-snapping containers see the scroll-snap-type
almanac entry.
OK, so moving on to scroll-padding
scroll-padding
is used to adjust the snapping container’s optimal viewing region. This is useful if the container has elements such as a fixed header that would obscure elements inside or if the scrollable container needs some space to give the interior elements room to breathe once they’ve been “snapped” into position.
A simple example would be using scroll-padding
to create some fixed spacing of 50px
at the top and left of the container:
.scroll-container {
scroll-padding: 50px 0 0 50px;
}
![A diagram with 2 boxes, one is the element container with a pink background and 50 pixels of spacing on the top and the left hand sides of the container. The second box is the element itself in dark gray sitting against the bottom left edge of the container.](png/scroll-padding5cfe.png)
Syntax
/* Shorthand */
scroll-padding: [ <length-percentage> | auto ]{1,4};
/* Longhands */
scroll-padding-top: <length-percentage> | auto;
scroll-padding-right: <length-percentage> | auto;
scroll-padding-bottom: <length-percentage> | auto;
scroll-padding-left: <length-percentage> | auto;
/* inline-specific and block-specific properties as well */
scroll-padding-block: [ <length-percentage> | auto ]{1,2};
scroll-padding-inline: [ <length-percentage> | auto ]{1,2};
Important note on longhands: Chrome does not currently support longhand-format scroll-padding
and scroll-margin
properties. Use the shorthand for maximum browser support. See this issue on the chromium bug tracker for more details and the current status.
Values
scroll-padding
accepts the following values:
auto
leaves the padding to be determined by the browser/user-agent. Generally, this means a value of 0px, but can be non-zero if the user-agent decides another value is more appropriate.<length-percentage>
is written similar topadding
and other properties where the value can be defined with units (px
,em
,vh
, etc.) or as a percentage of the container itself.
Example
See the Pen scroll-padding example
by CSS-Tricks (@css-tricks) on CodePen.
Browser Support
This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.
Desktop
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
69 | 68 | 11* | 79 | 11 |
Mobile / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
123 | 124 | 123 | 11.0-11.2 |