CSS scroll-padding-left attribute

Definition and Usage

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

吸附位置 refers to the position where the child element is吸附到位 in the container when the scrolling stops.

吸附位置 is determined by 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吸附位置 is set to the left of the child element.

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

Instance

Example 1

Sets the scroll padding to 20px from the left side of the container to the吸附position:

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

Try It Yourself

Example 2: Image Library

scroll-padding-left The property can be used in galleries with吸附behavior to push the images from behind the fixed element into the view:

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

Try It Yourself

Example 3: Set Scroll Padding on the Left

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

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

Try It Yourself

Example 4: 吸附position

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

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

Try It Yourself

CSS Syntax

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

Property Value

Technical Details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Related Page

Reference:CSS direction property

Reference:CSS scroll-snap-align attribute

Reference:CSS scroll-snap-type attribute

Reference:CSS writing-mode attribute