CSS scroll-margin-right property

Definition and Usage

scroll-margin-right 属性指定吸附位置与容器之间的距离。

property to specify the distance between the吸附position and the container. scroll-snap-align The吸附position refers to the fixed position of the child element in the container when the scrolling stops. The吸附position is specified by direction and property settings, but may also be affected by CSS properties writing-mode

influence.Note:

This property is only effective when the吸附position is set to the right of the child element. scroll-margin-right property effects on the parent element, and must be set on the child element to see scroll-margin-right and scroll-snap-align property, and set scroll-snap-type Property.

Instance

Example 1

Set the scroll margin between the吸附position and the container to 20px:

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

Try It Yourself

Example 2: Image Library

scroll-margin-right The property can be used in image galleries with吸附behavior. Here,scroll-margin-right Let the user know that there is another image on the right. Scroll past the first image to see the effect:

#container > img {
  scroll-margin-right: 30px;
}

Try It Yourself

Example 3:吸附position

In order to make scroll-margin-right property takes effect, the吸附position must be set to the right of the child element. In this example,direction The property changes the吸附position from the right side of the child element to the left. Use the following code toscroll-margin-right The following properties will no longer take effect:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

Try It Yourself

CSS Syntax

scroll-margin-right: 0;value|initial|inherit;

Property Value

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Related Pages

Reference:CSS direction property

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute