CSS scroll-padding-block-start property

Definition and Usage

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

This means that when you stop scrolling, the scroll will quickly adjust and stop at a specified distance between the吸附位置 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 language new lines are 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 CSS properties writing-mode 来定义。

.

The snap position refers to the position where the sub-element snaps to in the container when you stop scrolling. It is defined byNote: scroll-snap-align This attribute only takes effect in the block direction

attribute set to 'start' before it takes effect. scroll-padding-block-start attribute effect on the parent element, and it must be set on the child element to see scroll-snap-align attributes, and set the scroll-padding-block-start and scroll-snap-type attribute.

Instance

Example 1

Sets the block direction scroll inner padding from the container starting position to the snap position to 20px:

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

Try It Yourself

Example 2: Image Library

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

  scroll-padding-block-start: 30px;
}

Try It Yourself

Example 3

When the container element's writing-mode When the attribute value is set to vertical-rl, the starting position of the container in the block direction and the sub-elements move from the top to the right. This will affect the scroll snap behavior and scroll-padding-block-start How the attribute works:

  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

scroll-padding-block-start: auto|value|initial|inherit;

Attribute Value

Technical Details

Browser Support

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

Related Pages

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute