CSS scroll-margin-inline attribute

Definition and usage

scroll-margin-inline The attribute specifies the distance between the吸附position 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 in the inline direction, which is between the吸附position and the container.

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, the new characters in Arabic 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 attribute direction and writing-mode Definition.

The吸附position refers to the position where the child element吸附to the container when the scrolling stops.

scroll-margin-inline The attribute is a shorthand attribute for the following attributes:

• scroll-margin-inline-start
• scroll-margin-inline-end

If the scroll-margin-inline attribute has two values:

scroll-margin-inline: 20px 70px;

• The distance from the beginning is 20px
• The distance to the end is 70px

If the scroll-margin-inline attribute has a value:

scroll-margin-inline: 20px;

• The distance from the beginning and end is 20px

To see scroll-margin-inline The effect of the attribute must be set on the child element scroll-margin-inline and scroll-snap-align property, and set it on the parent element scroll-snap-type .

CSS properties 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.

Instance

Example 1

Sets the distance from the adhesive position to the scrollable container in the inline direction:

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

Try It Yourself

Example 2

When the <div> element's 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, and the ending position of the element moves from the right to the bottom. This also affects scroll-margin-inline Property:

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

Try It Yourself

Example 3

When the <div> element's 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 moves from the left to the right, and the ending position of the element moves from the right to the left. This also affects scroll-margin-inline Property:

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

Try It Yourself

CSS Syntax

scroll-margin-inline: 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-margin-inline-end attribute

Reference:CSS scroll-margin-inline-start attribute

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode property