Proprietà CSS scroll-padding-block

Definizione e uso

scroll-padding-block l'attributo specifica la distanza dal contenitore alla posizione di adesione del figlio dell'elemento nella direzione del blocco.

Questo significa che, quando si ferma di scorrere, lo scorrimento si adatta rapidamente e si ferma alla distanza specificata tra la posizione di adesione e il contenitore nella direzione del blocco.

La direzione del blocco è la direzione di posizionamento della prossima riga rispetto alla posizione della riga esistente, che è anche il modo di layout sulla pagina per etichette con CSS display: block; come <p> e <div> etichette. La direzione del blocco dipende dalla lingua di scrittura, ad esempio, nella lingua mongola, le nuove righe sono disposte da sinistra a destra, quindi la direzione del blocco è anche da sinistra a destra, mentre sulla pagina inglese ha una direzione del blocco verso il basso. La direzione del blocco può essere impostata tramite l'attributo CSS writing-mode per definire.

La posizione di adesione è la posizione in cui il figlio dell'elemento si adatta nel contenitore quando si ferma di scorrere.

Attenzione:Questa proprietà è valida solo nella direzione del blocco,scroll-snap-align l'attributo è efficace quando impostato su 'start' o 'end'.

scroll-padding-block l'attributo è un attributo abbreviato di seguito:

• scroll-padding-block-start
• scroll-padding-block-end

scroll-padding-block il valore dell'attributo può essere impostato in diversi modi:

se l'attributo scroll-padding-block ha due valori:

scroll-padding-block: 10px 50px;

• la distanza di inizio è di 10px
• la distanza di fine è di 50px

se l'attributo scroll-padding-block ha un valore:

scroll-padding-block: 10px;

• la distanza di inizio e fine è di 10px

per vedere scroll-padding-block L'effetto dell'attributo deve essere impostato sui figli dell'elemento scroll-snap-align elemento scroll-padding-block e L'attributo, e viene impostato sul padre scroll-snap-type

L'attributo di CSS scroll-padding-block e scroll-padding-inline L'attributo è correlato all'attributo CSS Proprietà CSS scroll-padding-top,scroll-padding-bottom,scroll-padding-left e scroll-padding-right molto simile, ma scroll-padding-block e scroll-padding-inline L'attributo dipende dalla direzione del blocco e dalla direzione inline.

Esempio

Esempio 1

Impostare il margine interno di scorrimento nella direzione del blocco a 20px dal contenitore alla posizione di adesione:

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

Prova personalmente

Esempio 2: Biblioteca di immagini

scroll-padding-block L'attributo può essere utilizzato per gallerie di immagini con comportamento di adesione per spingere le immagini sotto un elemento fisso:

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

Prova personalmente

Esempio 3

Quando l'elemento contenitore writing-mode Quando l'attributo è impostato a vertical-rl, la posizione iniziale del contenitore e degli elementi figli nella direzione del blocco si sposta da sopra a destra, e la posizione finale si sposta da sotto a sinistra. Questo influenzerà il comportamento di adesione dello scorrimento e scroll-padding-block Modalità di funzionamento dell'attributo:

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

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Dettagli tecnici

Supporto del browser

Tabella delle numeri rappresenta la versione del browser che supporta completamente l'attributo per la prima volta.

Pagine correlate

Riferimento:Proprietà CSS scroll-padding-block-end

Riferimento:Proprietà CSS scroll-padding-block-start

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode