Proprietà CSS scroll-margin-inline-start

Definizione e utilizzo

scroll-margin-inline-start L'attributo specifica la distanza tra la posizione di attrazione e il contenitore nella direzione interna.

Questo significa che quando smetti di scorrere, lo scorrimento si adatta rapidamente e si ferma alla distanza specificata tra la posizione di attrazione dell'elemento figlio e il contenitore, nella direzione interna.

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

La posizione di adesione è la posizione in cui i figli si attaccano al contenitore quando si ferma di scorrere.

Attenzione:Questa proprietà è disponibile solo scroll-snap-align funzionano solo quando l'attributo della direzione in linea è impostato su 'start'.

CSS scroll-margin-inline e scroll-margin-block Le proprietà sono equivalenti alle proprietà CSS Proprietà CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left e scroll-margin-right Sono molto simili, ma scroll-margin-block e scroll-margin-inline L'attributo dipende dalla direzione del blocco e dalla direzione in linea.

Esempio

Esempio 1

Impostare la distanza dalla posizione di adesione al contenitore scorrevole:

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

Prova personalmente

Esempio 2

Quando l'attributo writing-mode Quando il valore dell'attributo è impostato su vertical-rl, la direzione in linea è verso il basso. Il risultato è che la posizione iniziale dell'elemento si sposta dal lato sinistro alla cima:

div {
  scroll-margin-inline-start: 20px;
  writing-mode: vertical-rl;
}

Prova personalmente

Esempio 3

Quando l'attributo direction Quando il valore dell'attributo è impostato su rtl, la direzione in linea è da destra a sinistra. Il risultato è che la posizione iniziale dell'elemento viene spostata da sinistra (rispetto alla direzione originale, che inizia effettivamente sulla destra, ma qui 'sinistra' si riferisce alla sinistra della direzione predefinita ltr):

div {
  scroll-margin-inline-start: 20px;
  direction: rtl;
}

Prova personalmente

Sintassi CSS

inset-inline-start: 0|value|initial|inherit;

Valore dell'attributo

Dettagli tecnici

Supporto del browser

Le numeri nella tabella rappresentano la versione del browser che supporta completamente questa proprietà.

Pagine correlate

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode