CSS scroll-margin-left property

Definition and Usage

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

property to specify the distance between the吸附位置 and the container. scroll-snap-align 吸附位置 refers to the fixed position of the child element in the container when the scrolling stops. The吸附位置 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吸附位置 is set to the left side of the child element. scroll-margin-left property effects on the parent element, but must be set on the child element to see scroll-margin-left and scroll-snap-align property, and set scroll-snap-type Property.

Instance

Example 1

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

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

Try It Yourself

Example 2: Image Library

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

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

Try It Yourself

Example 3:吸附位置

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

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

Try It Yourself

CSS Syntax

scroll-margin-left: 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 property

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute