CSS scroll-padding-right attribute

Definition and Usage

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

The吸附位置是指在停止滚动时，子元素在容器中吸附到位的位置。

the吸附位置由 scroll-snap-align property settings, but may also be affected by CSS properties direction and writing-mode influence.

Note:This property is only effective when the adhesion position is set to the right side of the child element.

to see scroll-padding-right property effects on the parent element, and must set scroll-snap-align properties, and set scroll-padding-right and scroll-snap-type property.

Instance

Example 1

Sets the scroll padding to 20px from the right side of the container to the adhesion position:

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

Try It Yourself

Example 2: Image Library

scroll-padding-right This property can be used in galleries with adhesion behavior to push images into the view from behind the fixed element:

#container > img {
  scroll-padding-right: 30px;
}

Try It Yourself

Example 3: Setting Scroll Padding on the Right

When adhesion behavior is set on both directions, you can also set scroll-padding-right property. Scroll horizontally to the next element to see the effect:

#container > div {
  scroll-padding-right: 30px;
}

Try It Yourself

Example 4: Adhesion Position

to make scroll-padding-right property takes effect, and the adhesion position must be set to the right side of the child element. In this example,direction The value 'rtl' of this property will change the adhesion position from the right side of the child element to the left. When using such code,scroll-padding-right The following properties will no longer take effect:

#container {
  direction: rtl;
  scroll-padding-right: 30px;
}
#container > div {
  scroll-snap-align: none end;
}

Try It Yourself

CSS Syntax

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