Atributo CSS scroll-margin-bottom

Definición y uso

scroll-margin-bottom La propiedad especifica la distancia entre la posición de adhesión y el contenedor.

吸附位置是指子元素在停止滚动时吸附到容器中的位置。

吸附位置通过 scroll-snap-align The snap position is the position to which the child element吸附 to the container when scrolling stops. property settings, but may also be affected by CSS properties and writing-mode influence.

Note:This property is only valid when the snap position is set at the bottom of the child element.

to see scroll-margin-bottom properties on the parent element, and you must set scroll-margin-bottom and scroll-snap-align property, and set scroll-snap-type property.

Instance

Example 1

Set the scroll margin bottom between the snap position and the container to 20px:

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

Try It Yourself

Example 2: Image Library

scroll-margin-bottom This property can be used in image galleries with snap behavior. In this example,scroll-margin-bottom Let the user know that there is another image at the bottom. Scroll past the first image to see the effect:

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

Try It Yourself

Example 3: Snap Position

To make scroll-margin-bottom property takes effect, and the snap position must be set at the bottom of the child element. In this example,writing-mode When using this code, thescroll-margin-bottom The following properties will no longer be valid:

#container {
  writing-mode: vertical-rl;
}
#container > div {
  scroll-margin-bottom: 30px;
  scroll-snap-align: end none;
}

Try It Yourself

CSS Syntax

scroll-margin-bottom: 0;value|initial|inherit;

Attribute Value

Technical Details

Browser Support

The numbers in the table represent the browser version that first fully supports this attribute.

Páginas relacionadas

Referencia:Atributo CSS direction

Referencia:Atributo CSS scroll-snap-align

Referencia:Atributo CSS scroll-snap-type

Referencia:Atributo writing-mode de CSS