CSS scroll-padding-inline-start attribute

Definition and Usage

scroll-padding-inline-start attribute specifies the distance from the container starting position to the child element snap position in the inline direction.

This means that when you stop scrolling, the scroll will quickly adjust and stop at the specified distance between the snap position and the container.

The inline direction refers to the direction in which the next character is placed relative to the existing character in the line, which 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, so the inline direction is from right to left, while the inline direction on English pages is from left to right. The inline direction can be specified by the CSS property direction and writing-mode Definition.

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

Note:This attribute only sets the inline direction scroll-snap-align attribute is set to 'start' it takes effect.

to see scroll-padding-inline-start attribute effect must be set on the child element scroll-snap-align attribute, and set it on the parent element scroll-padding-inline-start and scroll-snap-type Property.

Instance

Example 1

Set the scroll inner padding from the starting position of the container to the snap position on the inline direction to 20px:

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

Try It Yourself

Example 2: Image Library

scroll-padding-inline-start The attribute can be used in galleries with snap behavior to push images out from behind fixed elements:

#container {
  scroll-padding-inline-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 and its child elements on the inline direction moves from the top to the right. This will affect the scroll snap behavior as well as scroll-padding-inline-start How the attribute works:

#container {
  scroll-padding-inline-start: 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, and the ending position of the container and its child elements moves from the right to the bottom. This will affect the scroll snap behavior as well as scroll-padding-inline How the attribute works:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Try It Yourself

CSS Syntax

scroll-padding-inline-start: 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 Pages

Reference:CSS direction attribute

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode attribute