CSS scroll-margin-bottom-Eigenschaft

Definition und Verwendung

scroll-margin-bottom Die Eigenschaft spezifiziert den Abstand zwischen der Anzeigeposition und dem Behälter.

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

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

influence.Note:

This property is only valid when the snap position is set at the bottom of the child element. scroll-margin-bottom properties on the parent element, and the snap position must be set on the child element to see scroll-margin-bottom and scroll-snap-align property, and set scroll-snap-type attribute.

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 such 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

Value Description
0 The bottom scroll margin is zero. This is the default value.
length

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

See:CSS-Uniten.
initial Sets this property to its default value. See: initial.
inherit Inherits this property from its parent element. See: inherit.

Technical details

Default value: none
Inheritance: No
Animation creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.scrollMarginBottom="20px"

Browser Support

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Verwandte Seiten

Referenz:CSS direction Eigenschaft

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft