scroll-padding-inline
Overview
The scroll-padding-inline property is used to specify the scroll padding of elements in the inline direction within scroll containers. By establishing the offsets for the optimal viewing region of the scrollport which is the visible portion of the scroll container as seen by the user, it 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. Moreover, it has a crucial role in scroll snap containers, as the scroll padding offsets help effectively align the content at snap points.
Note:
scroll-padding-inlineserves as a shorthand for the flow-relative longhandsscroll-padding-inline-startandscroll-padding-inline-end.
Examples and Usage
Following up on the shorthand context, we'll explore how scroll-padding-inline behaves when specified with one or two input values, applied as fixed units to a scroll container. These examples are primarily for demonstration purposes.
A single input value sets the same scroll padding for the inline start and inline end of the scroll container:
.scroll-container-example {
scroll-padding-inline: 20px; /* Applies 20px scroll padding to the inline start and end */
}
When two input values are specified, the first applies to the inline start and the second to the inline end:
.scroll-container-example {
scroll-padding-inline: 20px 40px; /* inline-start: 20px, inline-end: 40px */
}
In addition, the terms inline-start and inline-end adapt based on the writing-mode property. Specifically, for a horizontal-tb writing mode, inline-start corresponds to the left edge of the scroll container and inline-end to the right edge. Conversely, for vertical writing modes, inline-start corresponds to the top edge and inline-end to the bottom edge of the scroll container.
Values
The scroll-padding-inline 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-inline-startscroll-padding-inline-endscroll-padding-blockscroll-paddingscroll-marginscroll-margin-inlinescroll-margin-block
Tips and Tricks
Just like its constituent and associated scroll padding properties,
scroll-padding-inlineaccepts various values including lengths, percentages, and theautokeyword.In CSS, the inline direction can be determined by the
writing-modeanddirectionproperties.scroll-padding-inlineis flow-relative, meaning it adapts to the text flow direction determined by these properties and provides control over this direction in the context of scrolling behavior.The scroll padding defined by
scroll-padding-inlineand other scroll padding-related properties, doesn't affect the overall layout size of an element but influences the scroll snap area size.
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.
Useful Resources
Can I use: scroll-padding-inline
W3C's Editor's Draft of CSS Scroll Snap Module Level 1: scroll-padding-inline