Proprietà CSS scroll-padding-inline-end

Definizione e uso

scroll-padding-inline-end L'attributo specifica la distanza in direzione in linea tra l'estremità del contenitore e la posizione di allineamento dell'elemento figlio.

Questo significa che quando si ferma lo scorrimento, lo scorrimento si adatta rapidamente e si ferma alla distanza specificata tra la posizione di allineamento e il contenitore.

La direzione in linea si riferisce alla direzione in cui il carattere successivo viene posizionato rispetto al carattere esistente nella riga, che è anche il modo di layout del testo per etichette con CSS display: inline; (come <a> e <strong> etichette) nel testo. La direzione in linea dipende dalla lingua di scrittura, ad esempio i nuovi caratteri dell'arabo sono disposti da destra a sinistra, quindi la direzione in linea è da destra a sinistra, mentre la direzione in linea delle pagine inglesi è da sinistra a destra. La direzione in linea può essere definita tramite l'attributo CSS direction e writing-mode Definizione.

La posizione di allineamento si riferisce alla posizione in cui l'elemento figlio si allinea correttamente all'interno del contenitore quando si ferma la scorrimento.

Attenzione:Questa proprietà è valida solo in scroll-snap-align L'attributo è efficace solo quando impostato in direzione in linea su 'end'.

per vedere scroll-padding-inline-end Proprietà sull'elemento padre, e impostare scroll-snap-align Proprietà, e impostare scroll-padding-inline-end e scroll-snap-type Proprietà.

Esempio

Esempio 1

Impostare il margine di scorrimento inline direzionale dal termine del contenitore alla posizione di allineamento di 20px:

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

Prova personalmente

Esempio 2: Libreria di immagini

scroll-padding-inline-end L'attributo può essere utilizzato in gallerie con comportamento di allineamento per spingere le immagini dietro un elemento fisso:

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

Prova personalmente

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 si sposta dal lato sinistro in alto e la fine dal lato destro in basso lungo la direzione inline. Questo influisce sul comportamento dell'allineamento della scorrimento e anche scroll-padding-inline-end Come funziona l'attributo:

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

Prova personalmente

Esempio 4

Quando l'elemento contenitore direction Quando il valore dell'attributo è impostato su 'rtl', il lato destro del contenitore e degli elementi figli si sposta a sinistra lungo la direzione inline. Questo influisce sul comportamento dell'allineamento della scorrimento e anche scroll-padding-inline-end Come funziona l'attributo:

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

Prova personalmente

Sintassi CSS

scroll-padding-inline-end: 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