CSS scroll-margin-right-Eigenschaft

定义和用法

scroll-margin-right The property specifies the distance between the snap position and the container.

The property specifies the distance between the snap position and the container. scroll-snap-align The snap position refers to the fixed position of the child element in the container when the scrolling stops. The snap position 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 snap position is set to the right side of the child element. scroll-margin-right The effect of the properties must be set on the child element to see scroll-margin-right 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-right: 20px;
}

Try It Yourself

Example 2: Image Library

scroll-margin-right The property can be used in image galleries with snap 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: Snap Position

To make scroll-margin-right The property takes effect, and the吸附位置 must be set to the right side of the child element. In this example,direction The property changes the吸附位置 from the right side of the child element to the left. Use the following code toscroll-margin-right The property 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 browser version that first fully supports this property.

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft