A propriedade CSS scroll-margin-left

Definição e uso

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

property to specify the distance between the吸附position and the container. scroll-snap-align 吸附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 on the left side of the child element. scroll-margin-left property effects on the parent element, and the吸附position 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吸附position 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吸附behavior. 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:吸附position

To make scroll-margin-left The property takes effect, and the吸附position must be set on the left side of the child element. In this case,direction The property changes the吸附position from the left side of the child element to the right side. Use the following code:scroll-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

Value Description
0 The scroll margin left is 0. Default value.
length

Specify the value of the scroll margin left in units such as px, pt, cm, etc. Negative values are allowed.

See:Unidades CSS.
initial Set this property to its default value. See: initial.
inherit This property inherits from its parent element. See: inherit.

Technical Details

Default Value: 0
Inheritance: No
Animation Production: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.scrollMarginLeft="20px"

Browser Support

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Páginas relacionadas

Referência:Atributo CSS direction

Referência:A propriedade CSS scroll-snap-align

Referência:A propriedade CSS scroll-snap-type

Referência:A propriedade CSS writing-mode