CSS scroll-margin-inline-start attribute

Definition and Usage

scroll-margin-inline-start The attribute specifies the distance between the吸附位置 and the container in the inline direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance from the吸附位置 between the starting position of the child element and the container in the inline direction.

The inline direction refers to the direction in which the next character is placed relative to the existing character in the line, which is also the layout method of tags with CSS display: inline; such as <a> and <strong> tags in text. The inline direction depends on the writing language, for example, Arabic characters are arranged from right to left, so the inline direction is from right to left, while the inline direction on English pages is from left to right. The inline direction can be set through the CSS property direction and writing-mode Definition.

The adhesion position refers to the position where the child elements are吸附到位 in the container when you stop scrolling.

Note:This property only works in scroll-snap-align properties only take effect when the inline direction is set to 'start'.

CSS's scroll-margin-inline and scroll-margin-block properties are similar to 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

Set the distance from the adhesion position to the scrollable container on the inline direction:

div {
  scroll-margin-inline-start: 20px;
}

Try It Yourself

Example 2

When the writing-mode When the property value is set to vertical-rl, the inline direction is downward. The result is that the starting position of the element moves from the left to the top:

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

Try It Yourself

Example 3

When the direction When the property value is set to rtl, the inline direction is from right to left. The result is that the starting position of the element is adjusted from the left (relative to the original direction, which is actually starting from the right, but here 'left' refers to the left of the original default direction ltr):

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

Try It Yourself

CSS Syntax

inset-inline-start: 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 direction attribute

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode attribute