CSS scroll-padding-inline property

Definition and Usage

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

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the吸附位置 and the container.

The inline direction refers to the direction in which the next character is placed relative to the existing characters in a line. This is also the layout method of tags with CSS display: inline; such as <a> and <strong> tags in text. The inline direction depends on the writing language, for example, the new characters in Arabic are arranged from right to left, making the inline direction from right to left, while English pages have an inline direction from left to right. The inline direction can be set through the CSS property direction and writing-mode to define.

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

Note:This property only applies to the inline direction,scroll-snap-align The property is only valid when the value is set to 'start' or 'end'.

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

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline the value of the property can be set in different ways:

If the scroll-padding-inline property has two values:

scroll-padding-inline: 10px 50px;

• the distance from the start is 10px
• the distance from the end is 50px

If the scroll-padding-inline property has a value:

scroll-padding-inline: 10px;

• the distance from the start and end are both 10px

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

CSS's scroll-padding-block and scroll-padding-inline property and CSS property 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 the inline direction.

Example

Example 1

Set the scroll inner padding on the inline direction, 20px from the container to the anchoring position:

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

Try It Yourself

Example 2: Image Library

In a picture gallery with anchoring behavior, you can use scroll-padding-inline The attribute pushes the image out from behind the fixed element:

#container {
  scroll-padding-inline: 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 its child elements on the inline direction moves from the left to the top, and the ending position moves from the right to the bottom. This will affect the scroll anchoring behavior and scroll-padding-inline How the attribute works:

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

Try It Yourself

Example 4

When the container element's direction When the attribute value is set to 'rtl', the starting position of the container and its child elements on the inline direction moves from the right to the left. This will affect the scroll anchoring behavior and scroll-padding-inline How the attribute works:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

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

Related Page

Reference:CSS direction attribute

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode property