The CSS scroll-padding property

Definition and Usage

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

This means that when you stop scrolling, the scroll will quickly adjust and stop at a specified distance from the container to the吸附位置 of the focus child element.

The吸附位置 refers to the fixed position of the child element in the container when it stops scrolling.

scroll-padding This property is a shorthand for the following properties:

• scroll-padding-top
• scroll-padding-bottom
• scroll-padding-left
• scroll-padding-right

scroll-padding The values of the property can be set in different ways:

If the scroll-padding property has four values:

scroll-padding: 15px 30px 60px 90px;

• The top distance is 15px
• The right distance is 30px
• The bottom distance is 60px
• The left distance is 90px

If the scroll-padding property has three values:

scroll-padding: 15px 30px 60px;

• The top distance is 15px
• The distance to the left and right is 30px
• The bottom distance is 60px

If the scroll-padding property has two values:

scroll-padding: 15px 30px;

• The top and bottom distances are 15px
• The distance to the left and right is 30px

If the scroll-padding property has a value:

scroll-padding: 10px;

• All four directions are 10px apart

to see scroll-padding property on the parent element, the effect must be set on the child element to see scroll-snap-align property, and set scroll-padding and scroll-snap-type property.

Note:In the following example, scroll padding is set for all sides, but due to scroll-snap-align Set to "start" so that only the top edge's scroll padding changes the scrolling behavior.

Instance

Example 1

Set the scroll padding from the container to the sticky position to 20px:

div {
  scroll-padding: 20px;
}

Try it yourself

Example 2: Image library

scroll-padding The property can be used in galleries with sticky behavior to push images below the fixed element:

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

Fixed top element

Try it yourself

Example 3: Set scroll padding at the bottom and right

scroll-padding The property can be set at the bottom and right of the container at the same time. Scroll horizontally and vertically to the next element to see the effect:

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

Try it yourself

CSS syntax

scroll-padding: 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 pages

Reference:The CSS scroll-padding-bottom property

Reference:The CSS scroll-padding-left property

Reference:The CSS scroll-padding-right property

Reference:The CSS scroll-padding-top property

Reference:The CSS scroll-snap-align property

Reference:The CSS scroll-snap-type property