CSS scroll-padding-inline-end property

Definition and usage

scroll-padding-inline-end This property specifies the distance in the inline direction between the end of the container and the alignment position of the child element.

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

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 elements with CSS display: inline; in text, such as <a> and <strong> tags. 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. Inline direction can be set through the CSS property direction and writing-mode Definition.

The alignment position refers to the position where the child element aligns in the container when the scrolling stops.

Note:This property is only applicable in scroll-snap-align This property takes effect only when the inline direction is set to 'end'.

to see scroll-padding-inline-end attributes on the parent element, and must set scroll-snap-align attributes, and set scroll-padding-inline-end and scroll-snap-type attribute.

Instance

Example 1

Set the inline direction scroll padding from the end of the container to the alignment position to 20px:

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

Try it yourself

Example 2: Image library

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

#container {
  scroll-padding-inline-end: 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 in the inline direction moves from left to top, and the end moves from right to bottom. This will affect the scrolling alignment behavior and scroll-padding-inline-end How the attribute works:

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

Try it yourself

Example 4

When the container element's direction When the attribute value is set to 'rtl', the end of the container and its child elements move from right to left in the inline direction. This will affect the scrolling alignment behavior and scroll-padding-inline-end How the attribute works:

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

Try it yourself

CSS syntax

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

Attribute 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 attribute