scroll-margin-block

Overview

The scroll-margin-block property is used to specify the scroll margins for an element's scroll snap area along the block dimension. Crucially, scroll-margin-block serves as a shorthand, allowing the flow-relative scroll-margin-block-start and scroll-margin-block-end longhand properties to be specified in a single statement.

Examples and Usage

scroll-margin-block enhances the scroll snap mechanism by modifying the margins along the block dimension of an element's scroll snap area. As a shorthand, it offers different ways of defining scroll margins: with a single value or two distinct values. Note that the examples below are primarily for demonstration purposes.

When a single value is provided, it sets the scroll margin for both edges (start and end) along the block dimension:

.scroll-element-example {
  scroll-margin-block: 30px; /* Sets the scroll margin to 30px on both edges */
}

When two different values are given, they set distinct margins for the start and end edges, respectively:

.scroll-element-example {
  scroll-margin-block: 20px 40px; /* Sets the scroll margin to 20px on the start edge and 40px on the end edge */
}

Moreover, the behavior of scroll-margin-block can be influenced by the writing-mode property. By default, in most languages, the writing mode is horizontal (horizontal-tb), with the block direction running from top (block-start) to bottom (block-end). However, if the writing mode is set to vertical (vertical-rl or vertical-lr), the block direction runs sideways - from left to right (vertical-lr) or right to left (vertical-rl).

For instance, if we set the writing-mode to vertical-rl and apply scroll-margin-block: 30px 0;, the scroll margin would be 30px on the right edge (block start) and 0 on the left edge (block end).

.example-element {
  scroll-margin-block: 30px 0; /* Right edge (block start) margin: 30px, left edge (block end) margin: 0 */
  writing-mode: vertical-rl;
}

Values

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

Associated Properties

• scroll-margin-block-start
• scroll-margin-block-end
• scroll-margin-inline
• scroll-margin
• scroll-padding
• scroll-padding-inline
• scroll-padding-block
• scroll-snap-type
• scroll-snap-align

Tips and Tricks

• scroll-margin-block sets the scroll margin along the block direction, which is influenced by the writing-mode property of the document or element.

• The scroll container encompasses the scrollable content. When scroll snap properties such as scroll-snap-type are applied, it becomes a scroll snap container.

• The snapport represents the visible part of the scroll container's content — the area where scroll snapping takes place. scroll-margin-block affects the alignment of an element with the snapport when scrolling occurs, by adjusting the boundaries of its scroll snap area along the block dimension.

• Understanding the concept of a scroll snap area is vital when working with scroll-margin-block. This region of the element aligns with the snapport of its scroll container during scrolling. scroll-margin-block modifies these boundaries, thereby affecting the element's position during scroll snapping.

• The bounding box of an element serves as the initial basis for the scroll snap area before the scroll margin is applied. This box refers to the smallest rectangle that can fully contain the entire element, including any transformations. scroll-margin-block modifies the scroll snap area by setting a scroll margin along the block dimension, which effectively adjusts the region that aligns with the snapport during scrolling.

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

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

The CSS scroll-margin-block-start Property

The CSS scroll-margin-block-end Property