CSS scroll-padding-block property

Definition and Usage

scroll-padding-block This attribute specifies the distance from 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 the specified distance between the吸附位置 and the container in the block direction.

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

The吸附位置 refers to the position where the child element is吸附到位 in the container when you stop scrolling.

Note:This property is only valid in the block direction,scroll-snap-align Valid when the attribute is set to 'start' or 'end'.

scroll-padding-block This attribute is a shorthand for the following attributes:

scroll-padding-block The value of the attribute can be set in different ways:

If the scroll-padding-block attribute has two values:

scroll-padding-block: 10px 50px;
  • The distance from the start is 10px
  • The distance from the end is 50px

If the scroll-padding-block attribute has a value:

scroll-padding-block: 10px;
  • The distance from the start and end is 10px

To see scroll-padding-block The effect of the attribute must be set on the child element scroll-snap-align properties, and set scroll-padding-block and scroll-snap-type properties.

CSS's scroll-padding-block and scroll-padding-inline attributes are similar to the CSS properties CSS scroll-padding-top property,scroll-padding-bottom,scroll-padding-left and scroll-padding-right are very similar, but scroll-padding-block and scroll-padding-inline The attribute depends on the block direction and inline direction.

Example

Example 1

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

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

Try It Yourself

Example 2: Image Library

scroll-padding-block The attribute can be used for image galleries with snap behavior to push images below fixed elements:

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

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 and child elements in the block direction moves from the top to the right, and the ending position moves from the bottom to the left. This will affect the scroll snap behavior and scroll-padding-block How the attribute works:

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

Try It Yourself

CSS Syntax

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

Property Value

Value Description
auto Default Value. The browser calculates the padding.
length

Specify scroll-padding-block with units such as px, pt, cm, etc.

Negative values are not allowed. See:CSS Units.

% Specifies the padding percentage of the containing element width.
initial Sets this property to its default value. See initial.
inherit Inherits this property from its parent element. See inherit.

Technical Details

Default Value: auto
Inheritance: No
Animation Creation: Not supported. See:Animation-related properties.
Version: CSS3
JavaScript Syntax: object.style.scrollPaddingBlock="20px"

Browser Support

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

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 15.0 56.0

Related Pages

Reference:CSS scroll-padding-block-end property

Reference:CSS scroll-padding-block-start property

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute