CSS scroll-padding-block property
- Previous Page scroll-padding
- Next Page scroll-padding-block-end
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; }
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; }
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; }
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
- Previous Page scroll-padding
- Next Page scroll-padding-block-end