CSS scroll-padding-top property

Definition and Usage

scroll-padding-top The property specifies the distance from the top of the container to the吸附position of the child element.

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

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

influence.Note:

This property is only effective when the snap position is set at the top of the child element. scroll-padding-top property on the parent element, the effect must be set on the child element to see scroll-snap-align property, and set scroll-padding-top and scroll-snap-type property.

Instance

Example 1

Sets the scroll padding to 20px from the top of the container to the snap position:

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

Try It Yourself

Example 2: Image Library

scroll-padding-top property can be used in image galleries with snap behavior to push images below the fixed element:

#container {
  scroll-padding-top: 30px;
}

Try It Yourself

Example 3: Set Scroll Padding at the Top

When snap behavior is set in both directions, you can also set scroll-padding-top property. Scroll vertically to the next element to see the effect:

#container {
  scroll-padding-top: 30px;
}

Try It Yourself

Example 4: Snap Position

to make scroll-padding-top property takes effect, and the snap position must be set at the top of the child element. In this example,writing-mode When using this code, thescroll-padding-top The following properties will no longer take effect:

#container {
  writing-mode: vertical-rl;
  scroll-padding-top: 30px;
}
#container > div {
  scroll-snap-align: start none;
}

Try It Yourself

CSS Syntax

scroll-padding-top: 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 property

Reference:CSS scroll-snap-align property

Reference:CSS scroll-snap-type property

Reference:CSS writing-mode attribute