Proprietà CSS scroll-margin-right

Definizione e uso

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

L'attributo specifica la distanza tra la posizione di adesione e il contenitore. scroll-snap-align L'adesione alla posizione è la posizione in cui l'elemento figlio si posiziona fissato nel contenitore quando si ferma lo scorrimento. La posizione di adesione è specificata tramite direction e L'attributo impostato, ma potrebbe essere influenzato anche dalle proprietà CSS Proprietà di scrittura

influenza.Attenzione:

Questa proprietà è efficace solo quando la posizione di adesione è impostata sulla destra dell'elemento figlio. scroll-margin-right L'effetto dell'attributo deve essere impostato sull'elemento figlio per vedere scroll-margin-right e scroll-snap-align L'attributo, e impostare anche l'effetto dell'attributo scroll-snap-type Proprietà.

Esempio

Esempio 1

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

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

Prova personalmente

Esempio 2: Libreria di immagini

scroll-margin-right L'attributo può essere utilizzato nelle gallerie di immagini con comportamento di adesione. Qui,scroll-margin-right Fare sapere all'utente che c'è un'altra immagine sulla destra. Scorciare oltre la prima immagine per vedere l'effetto:

#container > img {
  scroll-margin-right: 30px;
}

Prova personalmente

Esempio 3: Posizione di adesione

Per rendere scroll-margin-right L'attributo è efficace, la posizione di adesione deve essere impostata sulla destra dell'elemento figlio. In questo esempio,direction L'attributo cambia la posizione di adesione da destra dell'elemento figlio a sinistra. Utilizzando questo codice,scroll-margin-right L'attributo non avrà più effetto:

#container {
  direction: rtl;
}
#container > div {
  scroll-margin-right: 30px;
  scroll-snap-align: none end;
}

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
0 La margine esterna di scorrimento destra è 0. Valore predefinito.
length

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

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

Dettagli tecnici

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

Supporto del browser

Tabella delle numeri rappresenta la versione del browser che supporta completamente l'attributo per la prima volta.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 14.1 56.0

Pagine correlate

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Proprietà CSS writing-mode