Proprietà CSS scroll-padding-inline

Definizione e uso

scroll-padding-inline L'attributo specifica la distanza dalla casella alla posizione di adesione dell'elemento figlio nella direzione in linea.

Questo significa che quando smetti di scorrere, lo scorrimento si adatta rapidamente e si ferma alla distanza specificata tra la posizione di adesione e la casella.

La direzione in linea è la direzione in cui il prossimo carattere viene posizionato rispetto alla posizione dei caratteri esistenti in una riga. Questo è anche il modo in cui i tag con CSS display: inline; (come i tag <a> e <strong>) si layoutano nel testo. La direzione in linea dipende dalla lingua di scrittura, ad esempio i nuovi caratteri dell'arabo sono disposti da destra a sinistra, il che rende la direzione in linea da destra a sinistra, mentre le pagine inglesi hanno una direzione in linea da sinistra a destra. La direzione in linea può essere impostata tramite l'attributo CSS direction e writing-mode definita.

La posizione di adesione è la posizione in cui l'elemento figlio si adatta nella casella quando smetti di scorrere.

Attenzione:Questa proprietà è valida solo nella direzione in linea,scroll-snap-align È efficace solo quando il valore dell'attributo è 'start' o 'end'.

L'attributo scroll-padding-inline è un'abbreviazione delle seguenti proprietà:

• scroll-padding-inline-start
• scroll-padding-inline-end

scroll-padding-inline Il valore dell'attributo può essere impostato in diversi modi:

Se l'attributo scroll-padding-inline ha due valori:

scroll-padding-inline: 10px 50px;

• La distanza dall'inizio è di 10px
• La distanza dalla fine è di 50px

Se l'attributo scroll-padding-inline ha un valore:

scroll-padding-inline: 10px;

• La distanza dall'inizio e dalla fine è di 10px

per vedere scroll-padding-inline Proprietà dell'effetto, deve essere impostata scroll-snap-align Proprietà, e deve essere impostata scroll-padding-inline e scroll-snap-type Proprietà.

Proprietà CSS scroll-padding-block e scroll-padding-inline Proprietà e proprietà CSS Proprietà CSS scroll-padding-top,scroll-padding-bottom,scroll-padding-left e scroll-padding-right sono molto simili, 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 lungo la direzione inline, da contenitore a posizione di adesione 20px:

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

Prova da solo

Esempio 2: biblioteca di immagini

In una galleria di immagini con comportamento di adesione, è possibile utilizzare scroll-padding-inline L'attributo spinge l'immagine fuori dall'elemento fisso:

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

Prova da solo

Esempio 3

Quando l'elemento contenitore writing-mode Quando il valore dell'attributo è impostato su 'vertical-rl', la posizione iniziale del contenitore e degli elementi figli lungo la direzione inline si sposta da sinistra a alto, e la posizione finale da destra a basso. Questo influisce sul comportamento di adesione durante lo scorrimento. scroll-padding-inline Modalità di funzionamento dell'attributo:

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

Prova da solo

Esempio 4

Quando l'elemento contenitore direction Quando il valore dell'attributo è impostato su 'rtl', la posizione iniziale del contenitore e degli elementi figli lungo la direzione inline si sposta da destra a sinistra. Questo influisce sul comportamento di adesione durante lo scorrimento. scroll-padding-inline Modalità di funzionamento dell'attributo:

#container {
  scroll-padding-inline: 20px 0;
  direction: rtl;
}

Prova da solo

Sintassi CSS

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

Valore dell'attributo

Dettagli tecnici

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

Pagina relativa

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà writing-mode CSS