Atributo scroll-margin-left de CSS

Definición y uso

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

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

influence.Note:

This property is only effective when the吸附位置 is set on the left side of the child element. scroll-margin-left The effect of the properties must be set on the child element to see scroll-margin-left and scroll-snap-align The 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 on 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;

Attribute Value

Technical Details

Browser Support

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

Páginas relacionadas

Referencia:Atributo direction de CSS

Referencia:Atributo scroll-snap-align de CSS

Referencia:Atributo scroll-snap-type de CSS

Referencia:CSS propiedades de writing-mode