CSS scroll-padding-bottom attribute

Definition and usage

scroll-padding-bottom Property specifies the distance from the bottom of the container to the吸附位置of the child element.

The吸附位置is the position where the child element吸附to in the container when you stop scrolling. The吸附位置is specified by scroll-snap-align Property settings, but may also be affected by CSS properties direction and writing-mode The influence.

Note:This attribute is only effective when the吸附 position is set at the bottom of the child element.

to see scroll-padding-bottom properties on the parent element, and set scroll-snap-align properties, and set scroll-padding-bottom and scroll-snap-type Attribute.

Instance

Example 1

Set the scroll padding from the bottom of the container to the吸附 position to 20px:

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

Try it yourself

Example 2: Image library

In an image gallery with吸附 behaviors, you can use scroll-padding-bottom The attribute pushes the image above the fixed element:

#container {
  scroll-padding-bottom: 30px;
}

Try it yourself

Example 3: Set bottom scroll padding

When吸附 behaviors are set in both directions,吸附 behaviors can also be set on the container: scroll-padding-bottom The attribute. Scroll vertically to the next element to see the effect:

#container {
  scroll-padding-bottom: 30px;
}

Try it yourself

Example 4:吸附 position

To make scroll-padding-bottom The attribute takes effect, and the吸附 position must be set at the bottom of the child element. In this example,writing-mode The attribute changes the吸附 position from the bottom of the child element to the left. When using this code,scroll-padding-bottom The attribute will no longer take effect:

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

Try it yourself

CSS syntax

scroll-padding-bottom: auto|value|initial|inherit;

Attribute value

Technical details

Browser support

The numbers in the table represent the first browser version to fully support this property.

Relevant pages

Reference:CSS direction property

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode property