CSS scroll-margin-inline-end attribute

Definition and usage

scroll-margin-inline-end The property 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 in the inline direction, which refers to the distance between the吸附位置 of the end of the child element and the container.

The inline direction is 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 the 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 property direction and writing-mode Definition.

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

Note:Note: scroll-snap-align This property is only set in the inline direction

the property takes effect only when the property is set to 'end'. scroll-margin-inline-end property effect on the parent element, and set it on the child element to see scroll-margin-inline-end and scroll-snap-align property, and set the scroll-snap-type property.

CSS's scroll-margin-inline and scroll-margin-block properties are similar to the CSS property 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 adhesive position to the scrollable container in the inline direction:

div {
  scroll-margin-inline-end: 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 end of the element moves from the right to the bottom:

div {
  scroll-margin-inline-end: 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 end of the element moves from the right to the left:

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

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

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

Related Page

Reference:CSS direction attribute

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode attribute