Proprietà CSS scroll-padding-block-start

Definizione e utilizzo

scroll-padding-block-start L'attributo specifica la distanza dal punto di partenza del contenitore alla posizione di adesione dell'elemento figlio nel blocco direzionale.

Questo significa che quando si ferma di scorrere, lo scorrimento si adatta rapidamente e si ferma a una distanza specificata tra la posizione di adesione e il contenitore nel blocco direzionale.

La direzione del blocco si riferisce alla posizione rispetto alla riga esistente, la direzione in cui viene posizionata la prossima riga. Questo è anche il modo in cui i tag con CSS display: block; (come i tag <p> e <div>) si布局在页面上。La direzione del blocco dipende dalla lingua di scrittura, ad esempio, le nuove righe del mongolo sono disposte da sinistra a destra, quindi la direzione del blocco è da sinistra a destra, mentre la direzione del blocco delle pagine inglesi è verso il basso. La direzione del blocco può essere specificata tramite l'attributo CSS writing-mode to define.

The snap position refers to the position where the child element snaps to in the container when you stop scrolling. It is defined by

Note:This attribute only takes effect in the block direction scroll-snap-align attribute set to 'start' before it takes effect.

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

Instance

Example 1

Set the block direction scroll padding from the container starting position to the snap position to 20px:

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

Try It Yourself

Example 2: Image Library

In a gallery with snap behavior, you can use scroll-padding-block-start 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 starting position of the container in the block direction and the child elements move from the top to the right. This will affect the scroll snap 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 first browser version to fully support this property.

Pagine correlate

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode