CSS scroll-padding-block-start-Eigenschaft

Definition und Verwendung

scroll-padding-block-start Das Attribut legt die Distanz von der Startposition des Containers bis zum Anheftungspunkt des Kinderelements in der Blockrichtung fest.

Das bedeutet, dass der Scrollvorgang schnell angepasst wird, wenn Sie aufhören zu scrollen, und an der Blockrichtung, zwischen dem Anheftungspunkt und dem Container, an der angegebenen Distanz anhält.

Die Blockrichtung bezieht sich auf die Position im Vergleich zur aktuellen Zeile, in die die nächste Zeile eingefügt wird. Dies ist auch die Ausrichtung der mit CSS display: block; gekennzeichneten Elemente (wie <p> und <div>-Elemente) auf der Seite. Die Blockrichtung hängt von der Schreibrichtung der Sprache ab; zum Beispiel sind die neuen Zeilen in der Mongolischen Sprache von links nach rechts angeordnet, daher ist die Blockrichtung von links nach rechts, während die Blockrichtung auf englischen Seiten nach unten geht. Die Blockrichtung kann durch das CSS-Attribut writing-mode to define.

The sticky position refers to the position where the subelement sticks in the container when you stop scrolling. It is defined by

Note:This attribute only affects the block direction scroll-snap-align is set to 'start'.

The attribute only takes effect when scroll-padding-block-start attribute effect on the parent element, and it must be set on the child element to see scroll-snap-align attributes, and set the scroll-padding-block-start and scroll-snap-type Attribute.

Instance

Example 1

Sets the block direction scrolling inner padding from the container starting position to the sticky position to 20px:

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

Try It Yourself

Example 2: Image Library

In a picture gallery with sticky behavior, you can use scroll-padding-block-start The attribute pushes the image below the fixed element:

#container {
  scroll-padding-block-start: 30px;
}

Try It Yourself

Example 3

When the container element's writing-mode When the attribute value is set to vertical-rl, the container's starting position in the block direction and the subelements move from the top to the right. This affects the sticky scrolling behavior and scroll-padding-block-start How the attribute works:

#container {
  scroll-padding-block-start: 20px;
  writing-mode: vertical-rl;
}

Try It Yourself

CSS Syntax

scroll-padding-block-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.

Verwandte Seiten

Referenz:CSS scroll-snap-align-Eigenschaft

Referenz:CSS scroll-snap-type-Eigenschaft

Referenz:CSS writing-mode Eigenschaft