Proprietà CSS scroll-padding-inline-start

Definizione e uso

scroll-padding-inline-start proprietà specifica la distanza dalla posizione di inizio del contenitore alla posizione di adesione dell'elemento figlio nella direzione orizzontale.

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

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

La posizione di adesione si riferisce alla posizione in cui l'elemento figlio si attacca correttamente nel contenitore quando smetti di scorrere.

Attenzione:Questa proprietà è impostata solo nella direzione orizzontale scroll-snap-align proprietà con valore 'start' è attiva.

vedere scroll-padding-inline-start proprietà per vedere l'effetto, deve essere impostata sul elemento figlio scroll-snap-align proprietà e deve essere impostata sul elemento padre scroll-padding-inline-start e scroll-snap-type Proprietà.

Esempio

Esempio 1

Impostare il margine interno di scorrimento in direzione inline dal punto di partenza del contenitore alla posizione di adesione in 20px:

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

Prova tu stesso

Esempio 2: Galleria di immagini

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

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

Prova tu stesso

Esempio 3

Quando l'elemento contenitore writing-mode Quando il valore dell'attributo è impostato su 'vertical-rl', la posizione iniziale del contenitore e dei suoi elementi figli si sposta da sopra a destra nella direzione inline. Questo influenzerà il comportamento di adesione dello scorrimento e scroll-padding-inline-start Modalità di funzionamento dell'attributo:

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

Prova tu stesso

Esempio 4

Quando l'elemento contenitore direction Quando il valore dell'attributo è impostato su 'rtl', la posizione iniziale del contenitore e dei suoi elementi figli si sposta da destra a sinistra nella direzione inline, mentre la posizione finale del contenitore e dei suoi elementi figli si sposta dal lato destro al basso. Questo influenzerà il comportamento di adesione dello scorrimento e scroll-padding-inline Modalità di funzionamento dell'attributo:

#container {
  scroll-padding-inline-start: 20px;
  diretion: rtl;
}

Prova tu stesso

Sintassi CSS

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

Pagine correlate

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà writing-mode CSS