Proprietà CSS scroll-margin-inline

Definizione e uso

scroll-margin-inline L'attributo specifica la distanza tra la posizione di adesione e il contenitore nella direzione in linea.

Questo significa che, quando si ferma lo scorrimento, lo scorrimento si adatta rapidamente e si ferma a una distanza specificata nella direzione in linea, che si trova tra la posizione di adesione e il contenitore.

La direzione in linea è la direzione in cui il carattere successivo viene posizionato rispetto al carattere esistente nella riga, che è anche il modo in cui i tag con CSS display: inline; (come i tag <a> e <strong>) sono posizionati 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 impostata tramite l'attributo CSS direction and writing-mode Definizione.

La posizione di adesione è la posizione in cui l'elemento figlio si attacca al contenitore quando la scorrimento si ferma.

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

• scroll-margin-inline-start
• scroll-margin-inline-end

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

scroll-margin-inline: 20px 70px;

• La distanza di inizio è di 20px
• La distanza di fine è di 70px

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

scroll-margin-inline: 20px;

• La distanza di inizio e fine è di 20px

Per vedere scroll-margin-inline L'effetto delle proprietà deve essere impostato sul sottoelemento scroll-margin-inline and scroll-snap-align properties, and set them on the parent element scroll-snap-type properties.

CSS's scroll-margin-inline and scroll-margin-block properties are similar to CSS properties Proprietà CSS scroll-margin-top,scroll-margin-bottom,scroll-margin-left and scroll-margin-right are very similar, but scroll-margin-block and scroll-margin-inline The attribute depends on the block direction and inline direction.

Instance

Example 1

Sets the distance from the adhesive position to the scrollable container in the inline direction:

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

Try it yourself

Example 2

When the <div> element's writing-mode When the property value is set to vertical-rl, the inline direction is downward. The result is that the starting position of the element moves from the left to the top, and the ending position of the element moves from the right to the bottom. This also affects scroll-margin-inline Property:

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

Try it yourself

Example 3

When the <div> element's direction When the property value is set to rtl, the inline direction is from right to left. The result is that the starting position of the element moves from the left to the right, and the ending position of the element moves from the right to the left. This also affects scroll-margin-inline Property:

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

Try it yourself

CSS Syntax

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

Attribute value

Technical details

Browser Support

The numbers in the table represent the first browser version to fully support this property.

Pagine correlate

Riferimento:Proprietà direction CSS

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

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

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode