CSS scroll-margin-block-end attribute

Definition and Usage

scroll-margin-block-end The property specifies the distance between the alignment position and the container in the block direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the吸附 position of the child element at the end of the block direction and the container.

The block direction refers to the position relative to the existing line, and the direction in which the next line is placed. This is also the way in which tags with CSS display: block; such as <p> and <div> tags, are laid out on the page. The block direction depends on the writing language, for example, Mongolian new lines are arranged from left to right, so the block direction is also from left to right, while the block direction on an English page is downward. The block direction can be specified through the CSS property writing-mode .

The吸附位置 refers to the position where the child element吸附 in the container when you stop scrolling. It is defined by

Note:This property only applies to the block direction scroll-snap-align property takes effect only when set to 'end'.

to see scroll-margin-block-end property effects on the child element, scroll-margin-block-end and scroll-snap-align property, and set scroll-snap-type properties.

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

Example

Example 1

Sets the alignment position and the container's scroll margin in the block direction to 20px:

div {
  scroll-margin-block-end: 20px;
}

Try It Yourself

Example 2

When the <div> element's writing-mode When the property value is set to vertical-rl, the block direction is from right to left. The result is that the end of the element moves from the bottom to the left:

div {
  scroll-margin-block-end: 50px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this property.

Related Pages

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode attribute