Proprietà CSS scroll-margin-block

Definizione e uso

scroll-margin-block L'attributo specifica la distanza tra la posizione di adesione (snap position) e il contenitore 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 della direzione del blocco e il contenitore.

La direzione del blocco è la direzione in cui viene posizionata la riga successiva rispetto alla posizione della riga esistente, che è anche il modo in cui i tag con CSS display: block; (come i tag <p> e <div>) sono posizionati nella pagina. La direzione del blocco dipende dalla lingua di scrittura, ad esempio, il mongolo nuovo riga è disposto da sinistra a destra, quindi la direzione del blocco è anche da sinistra a destra, mentre la direzione del blocco delle pagine inglesi è verso il basso. La direzione del blocco può essere definita tramite l'attributo CSS writing-mode definita.

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

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

• scroll-margin-block-start
• scroll-margin-block-end

scroll-margin-block Il valore dell'attributo può essere impostato in diversi modi:

Se l'attributo scroll-margin-block ha due valori:

scroll-margin-block: 10px 50px;

• scroll-margin-block: 10px 50px;
• La distanza di inizio è di 10px

La distanza di fine è di 50px

scroll-margin-block: 10px;

• Se l'attributo scroll-margin-block ha un valore:

La distanza di inizio e fine è di 10px scroll-margin-block L'effetto dell'attributo deve essere impostato sull'elemento figlio per vedere scroll-margin-block e scroll-snap-align L'attributo, impostato sul padre dell'elemento, e scroll-snap-type attributo.

CSS scroll-margin-inline e scroll-margin-block L'attributo è simile all'attributo CSS Proprietà CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left e scroll-margin-right molto simile, 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 tra la posizione di adesione nella direzione del blocco e il contenitore scrollabile:

div {
  scroll-margin-block: 10px;
}

Prova tu stesso

Esempio 2

Quando il figlio dell'elemento writing-mode Quando l'attributo value è impostato su vertical-rl, la posizione di inizio dell'elemento nella direzione del blocco si sposta da sopra a destra, e la posizione di fine si sposta da sotto a sinistra. Questo influenzerà il comportamento di adesione durante lo scorrimento e scroll-margin-block Modo di funzionamento dell'attributo:

div {
  scroll-margin-block: 20px 0;
  writing-mode: vertical-rl;
}

Prova tu stesso

Sintassi CSS

scroll-margin-block: 0|value|initial|inherit;

Valore dell'attributo

Dettagli tecnici

Supporto del browser

Tabella delle numeri rappresenta la versione del browser che supporta completamente la proprietà per la prima volta.

Pagine correlate

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

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

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode