CSS scroll-margin-block property

Definition and Usage

scroll-margin-block This property specifies the distance between the吸附位置 (snap position) and the container in the block direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at a specified distance from the吸附位置 and the container in the block direction.

The block direction refers to the direction in which the next line is placed relative to the existing line position, which is also the layout method of elements with CSS display: block; on the page, such as <p> and <div> tags. The block direction depends on the writing language, for example, Mongolian lines are arranged from left to right, so the block direction is also from left to right, while the block direction of English pages is downward. The block direction can be set through the CSS property writing-mode to define.

The吸附位置 refers to the position in the container where the child element snaps to when you stop scrolling.

Note:This property is only available in the block direction of scroll-snap-align The property is valid when set to 'start' or 'end'.

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block The value of the property can be set in different ways:

If the scroll-margin-block property has two values:

scroll-margin-block: 10px 50px;

• scroll-margin-block: 10px 50px;
• the distance at the beginning is 10px

the distance at the end is 50px

scroll-margin-block: 10px;

• If the scroll-margin-block property has a value:

the distance at the beginning and end is both 10px scroll-margin-block property effect on the parent element, but must be set on the child element to see scroll-margin-block and scroll-snap-align property, and set the scroll-snap-type properties.

CSS's scroll-margin-inline and scroll-margin-block properties are similar to CSS properties CSS scroll-margin-top property,scroll-margin-bottom,scroll-margin-left and scroll-margin-right very similar, but scroll-margin-block and scroll-margin-inline The attribute depends on the block direction and inline direction.

Example

Example 1

Set the distance between the吸附 position in the block direction and the scrollable container:

div {
  scroll-margin-block: 10px;
}

Try It Yourself

Example 2

When the child element's writing-mode When the attribute value is set to vertical-rl, the starting position of the element in the block direction moves from the top to the right, and the ending position moves from the bottom to the left. This will affect the scroll snap behavior and scroll-margin-block How the attribute works:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

scroll-margin-block: 0|value|initial|inherit;

Property Value

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Related Pages

Reference:CSS scroll-margin-block-end property

Reference:CSS scroll-margin-block-start property

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute