Proprietà CSS scroll-margin-bottom

Definizione e uso

scroll-margin-bottom L'attributo specifica la distanza tra la posizione di adsorbimento e il contenitore.

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

Snap position refers to the position in the container to which the child element snaps when scrolling stops. scroll-snap-align Snap position is determined by 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 the 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 for 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 property.

Pagine correlate

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode