The CSS scroll-padding Property

Overview

The scroll-padding property is used to specify the scroll padding within scroll containers, impacting the way scrollable content is displayed to the user. It aids in defining the optimal viewing region of the scrollport, which is the visible area of the scroll container, and allows for adjustment of this region to account for areas that could be obscured by fixed-positioned elements, or to add extra space around the scrollable content.

Crucially, scroll-padding acts as a shorthand, setting the scroll padding on all sides of an element via the scroll-padding-top, scroll-padding-right, scroll-padding-bottom, and scroll-padding-left properties.

Examples and Usage

Building on the shorthand context, we'll examine how scroll-padding behaves when specified with various numbers of values, applied as fixed units to a scroll container. These examples are primarily for demonstration purposes.

A single value sets the same scroll padding on all sides of the scroll container:

.scroll-container-example {
  scroll-padding: 30px; /* Applies 30px scroll padding to all sides */
}

When two values are specified, the first applies to the top and bottom, while the second targets the left and right sides:

.scroll-container-example {
  scroll-padding: 20px 40px; /* Top & bottom: 20px, left & right: 40px */
}

With three values, the first is for the top, the second for the left and right, and the third for the bottom:

.scroll-container-example {
  scroll-padding: 20px 40px 60px; /* Top: 20px, left & right: 40px, bottom: 60px */
}

If four values are defined, they correspond to the top, right, bottom, and left, in that specific order:

.scroll-container-example {
  scroll-padding: 10px 20px 40px 80px; /* Top: 10px, right: 20px, bottom: 40px, left: 80px */
}

For a unique case where the property is set with zeroes, scroll padding gets applied to specified sides only:

.scroll-container-example {
  scroll-padding: 30px 0 0 30px; /* Top: 30px, right: 0, bottom: 0, left: 30px */
}

Note that scroll-padding proves beneficial when dealing with toolbars, sidebars, or headers with a fixed position, that may affect the viewable area within a scroll container.

Furthermore, it's a crucial aspect when handling scroll snap containers, where elements snap into place as users scroll. When used together with scroll-snap-align, scroll-snap-type, and other properties, scroll-padding helps to manage the positioning of snap points within the viewable area.

Values

The scroll-padding property accepts the following values:

Value	Description
`auto`	The user agent(browser) determines the offset. Typically, this is `0px`, but the user agent may select a non-zero value if deemed more suitable.
`<length-percentage>`	Sets an inward offset from the respective edges of the scrollport, which can be expressed in valid length units (px, em, vh, etc.), or as a percentage.

Associated Properties

scroll-padding-top
scroll-padding-right
scroll-padding-bottom
scroll-padding-left
scroll-padding-inline
scroll-padding-block
scroll-margin
scroll-margin-inline
scroll-margin-block

Tips and Tricks

The scroll-padding property doesn't change the layout or scroll origin; it primarily impacts the viewing region during scrolling operations.
Although it doesn't alter an element's visibility directly, scroll-padding influences whether an element is considered in view during scrolling.
scroll-padding plays a significant role in scroll snap containers, helping to manage the positioning of snap points, particularly when used alongside scroll-snap-align and scroll-snap-type.

Browser Compatibility

For a more detailed breakdown, refer to the first link in the Useful Resources below.

Browser	Chrome	Edge	Safari	Firefox	Opera	Internet Explorer
Support	Yes*	Yes*	Yes*	Yes*	Yes*	No

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.