A propriedade CSS scroll-margin-right
- Página anterior scroll-margin-left
- Próxima página scroll-margin-top
Definição e uso
scroll-margin-right
属性指定吸附位置与容器之间的距离。
property to specify 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 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 right of the child element. scroll-margin-right
properties on the parent element, and the吸附位置 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吸附位置 and the container to 20px:
div { scroll-margin-right: 20px; }
Example 2: Image Library
scroll-margin-right
The property can be used in image galleries with吸附 behaviors. 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; }
Example 3:吸附位置
To make scroll-margin-right
The property takes effect, and the吸附位置 must be set to the right 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 following properties will no longer take effect:
#container { direction: rtl; } #container > div { scroll-margin-right: 30px; scroll-snap-align: none end; }
CSS Syntax
scroll-margin-right: 0;value|initial|inherit;
Property value
Value | Description |
---|---|
0 | Scroll margin right is 0. Default value. |
length |
Specify the value of the scroll margin right in units such as px, pt, cm, etc. Negative values are allowed. See:Unidades CSS. |
initial | Sets this property to its default value. See initial. |
inherit | Inherits this property from its parent element. See inherit. |
Technical details
Default value: | 0 |
---|---|
Inheritance: | No |
Animation creation: | Not supported. See:Animation-related properties. |
Version: | CSS3 |
JavaScript Syntax: | object.style.scrollMarginRight="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 direction do CSS
Referência:A propriedade CSS scroll-snap-align
Referência:A propriedade CSS scroll-snap-type
Referência:Propriedade writing-mode do CSS
- Página anterior scroll-margin-left
- Próxima página scroll-margin-top