scroll-padding-block

Overview

The scroll-padding-block property is used to specify the scroll padding of elements in the block 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-block serves as a shorthand for the flow-relative longhands scroll-padding-block-start and scroll-padding-block-end.

Examples and Usage

To expand on the shorthand aspect, we'll examine how scroll-padding-block behaves when specified with one or two input values, applied as fixed units to a scroll container. The examples below are mainly for demonstration purposes.

So, a single input value sets the same scroll padding for the block start and block end of the scroll container:

.scroll-container-example {
  scroll-padding-block: 20px; /* Applies 20px scroll padding to the block start and end */
}

When two input values are specified, the first applies to the block start and the second to the block end:

.scroll-container-example {
  scroll-padding-block: 20px 40px; /* block-start: 20px, block-end: 40px */
}

The behavior of the scroll-padding-block property is influenced by the writing-mode property. In vertical writing modes, the terms block-start and block-end correspond to the top and bottom edges of the scroll container, respectively. On the other hand, in horizontal writing modes, block-start corresponds to the top edge and block-end to the bottom edge of the scroll container.

For instance, if we define the writing-mode as vertical-rl and apply scroll-padding-block: 30px 0;, the scroll padding for the top edge (block-start) would be 30px and for the bottom edge (block-end) would be 0.

.scroll-container-example {
  scroll-padding-block: 30px 0; /* block-start: 30px, block-end: 0 */
  writing-mode: vertical-rl;
}

Values

The scroll-padding-block property accepts the following values:

Associated Properties

• scroll-padding-block-start
• scroll-padding-block-end
• scroll-padding-inline
• scroll-padding
• scroll-margin
• scroll-margin-inline
• scroll-margin-block

Tips and Tricks

• scroll-padding-block is influenced by the writing-mode property. Depending on the writing mode, the block direction can vary, altering the scroll padding accordingly. With writing-mode: horizontal-tb, scroll-padding-block controls the top and bottom scroll padding, while in vertical writing modes, it influences the scroll padding at the start and end of the scroll container's content flow.

• Remember, the scroll padding defined by scroll-padding-block and other scroll padding-related properties doesn't affect the overall layout size of an element but influences the scroll snap area size. It essentially allows more control over the visual offset and content alignment when scrolling, providing a more user-friendly experience.

• Unlike physical scroll-padding properties, scroll-padding-block and its constituents adjust scroll padding in the scroll container relative to the block direction, which can change based on writing modes. This makes it more versatile and adaptive in different layout scenarios.

• If you're designing a horizontal image carousel with vertical descriptions, you could use scroll-padding-block together with scroll-snap-type, scroll-snap-align, and scroll-padding-inline, along with other necessary properties for adjustment, to ensure the images and descriptions are properly aligned and provide optimal a viewing experience. Or, if you're building a vertically scrolling newsfeed with a fixed header and footer, scroll-padding-block can be used to prevent the content from being obscured by these elements when users navigate through snap points.

Browser Compatibility

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

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-block

W3C's Editor's Draft of CSS Scroll Snap Module Level 1: scroll-padding-block

The CSS scroll-padding-block-start Property

The CSS scroll-padding-block-end Property