CSS scroll-margin-bottom property

Definition and Usage

scroll-margin-bottom The attribute specifies the distance between the吸附位置吸附位置 and the container.

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

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

Property Value

Technical Details

Browser Support

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

Related Pages

Reference:CSS direction attribute

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute