CSS scroll-margin-block-start property

Previous Page scroll-margin-block-end
Next Page scroll-margin-bottom

Definition and Usage

scroll-margin-block-start The property specifies the distance between the吸附位置 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吸附位置 on the starting point of the sub-element in the block direction and the container.

The block direction refers to the placement direction of the next line relative to the existing line, which is also the layout method of tags with CSS display: block; such as <p> and <div> tags on the page. The block direction depends on the writing language, for example, the new line in Mongolian is arranged from left to right, so the block direction is 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 Definition.

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

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

be effective. scroll-margin-block-start property effect on the parent element, and must be set on the child element to scroll-margin-block-start and scroll-snap-align property, and set scroll-snap-type properties.

CSS's scroll-margin-inline and scroll-margin-block properties correspond to the CSS properties CSS scroll-margin-top property,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 between the container and the scroll margin in the block direction to 20px:

div {
  scroll-margin-block-start: 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 starting part of the element moves to the right from the top:

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

Try it yourself

CSS Syntax

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

Property value

Value	Description
0	Default. The default scroll-margin distance of the element.
length	Specifies a distance in units such as px, pt, cm, etc. Negative values are allowed. See:CSS Units.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Technical Details

Default value:	0
Inheritance:	No
Animation creation:	Not supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.scrollMarginBlockStart="20px"