CSS scroll-padding-block-end attribute

Definition and Usage

scroll-padding-block-end The property specifies the distance from the end of the container to the吸附 position of the child element in the block direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at a distance specified between the吸附 position and the container in the block direction.

The block direction refers to the position relative to the existing line, and the direction in which the next line is placed. This is also the layout method of tags with CSS display: block; such as <p> and <div> tags on the page. The block direction depends on the writing language, for example, Mongolian text is arranged from left to right, so the block direction is from left to right, while the block direction on an English page is downward. The block direction can be specified through the CSS property writing-mode to define.

The snap position refers to the position where the child element snaps to in the container when you stop scrolling. It is defined by

Note:This attribute only takes effect in the block direction scroll-snap-align attribute set to 'end' only takes effect.

To see scroll-padding-block-end attribute effect on the parent element, and set the scroll-snap-align attributes, and set the scroll-padding-block-end and scroll-snap-type attribute.

Instance

Example 1

Set the block direction scroll inner padding from the container end to the snap position to 20px:

div {
  scroll-padding-block-end: 20px;
}

Try it yourself

Example 2: Image library

In a gallery with snap behavior, you can use scroll-padding-block-end The attribute pushes the image above the fixed element:

#container {
  scroll-padding-block-end: 30px;
}

Try it yourself

Example 3

When the container element's writing-mode When the attribute value is set to vertical-rl, the container's end in the block direction and child elements move from bottom to left. This will affect the scroll snap behavior and scroll-padding-block-end How the attribute works:

#container {
  scroll-padding-block-end: 20px;
  writing-mode: vertical-rl;
}

Try it yourself

CSS syntax

scroll-padding-block-end: 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.

Related page

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode attribute