Proprietà scroll-margin CSS

Definizione e uso

scroll-margin L'attributo specifica la distanza tra la posizione di adesione e il contenitore.

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

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

scroll-margin L'attributo è un'abbreviazione degli attributi seguenti:

scroll-margin I valori dell'attributo possono essere impostati in diversi modi:

Se l'attributo scroll-margin ha quattro valori:

scroll-margin: 15px 30px 60px 90px;
  • La distanza superiore è di 15px
  • La distanza destra è di 30px
  • La distanza inferiore è di 60px
  • La distanza sinistra è di 90px

Se l'attributo scroll-margin ha tre valori:

scroll-margin: 15px 30px 60px;
  • La distanza superiore è di 15px
  • Le distanze laterali sono di 30px
  • La distanza inferiore è di 60px

Se l'attributo scroll-margin ha due valori:

scroll-margin: 15px 30px;
  • Le distanze superiori e inferiori sono di 15px
  • Le distanze laterali sono di 30px

Se l'attributo scroll-margin ha un valore:

scroll-margin: 10px;
  • Le distanze in tutte le quattro direzioni sono di 10px

Per vedere scroll-margin Proprietà dell'effetto, deve essere impostato scroll-margin e scroll-snap-align Proprietà, e impostare scroll-snap-type Proprietà.

Attenzione:Negli esempi seguenti, è stato impostato il margine di scorrimento esterno su tutti i lati, ma a causa di scroll-snap-align L'attributo è impostato su "start", quindi cambia solo la margine di scorrimento superiore.

Esempio

Esempio 1

Impostare la margine di scorrimento esterna tra la posizione di adesione e il contenitore a 20px:

div {
  scroll-margin: 20px;
}

Prova tu stesso

Esempio 2: Libreria di immagini

scroll-margin L'attributo può essere utilizzato in librerie di immagini con comportamento adesivo. Ecco un esempio:scroll-margin Permette all'utente di vedere che c'è un'altra immagine sulla sinistra. Scorrere oltre la prima immagine per vedere l'effetto:

#container > img {
  scroll-margin: 0 0 0 30px;
}
Pechino Danzatore Wuhan Tulipano Hangzhou

Prova tu stesso

Esempio 3: Impostazione della margine di scorrimento esterna inferiore e destra

Può essere impostato nella parte inferiore e destra dell'elemento. scroll-margin Proprietà. Lo scorrimento orizzontale e verticale al seguente elemento visualizza l'effetto:

#container > div {
  scroll-margin: 0 10px 30px 0;
}





Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
0 Margine di scorrimento esterno zero. Valore predefinito.
length

Specificare la margine di scorrimento esterna con unità come px, pt, cm, ecc. È possibile utilizzare valori negativi.

Vedi:Unità CSS.
initial Imposta questa proprietà al suo valore predefinito. Vedi initial.
inherit Eredita questa proprietà dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: 0
Ereditarietà: No
Produzione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.scrollMargin="20px"

Supporto del browser

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

Chrome Edge Firefox Safari Opera
69.0 79.0 90.0 14.1 56.0

Pagine correlate

Riferimento:Proprietà CSS scroll-margin-bottom

Riferimento:Proprietà CSS scroll-margin-left

Riferimento:Proprietà CSS scroll-margin-right

Riferimento:Proprietà CSS scroll-margin-top

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type