Proprietà CSS scroll-margin-left

Definizione e uso

scroll-margin-left 属性指定吸附位置与容器之间的距离。

吸附位置是指子元素在停止滚动时，其在容器中固定到位的位置。吸附位置通过 Questa proprietà è efficace solo quando la posizione di adesione è impostata sulla sinistra dell'elemento figlio. 属性设置，但也可能受到 CSS 属性 direction Attenzione: writing-mode 的影响。

L'attributo specifica la distanza tra la posizione di adesione e il contenitore.La posizione di adesione è la posizione in cui l'elemento figlio è fissato nel contenitore quando la scorrimento si ferma. La posizione di adesione è specificata dall'attributo

L'attributo writing-mode è impostato, ma potrebbe essere influenzato anche dall'attributo CSS scroll-margin-left influenza. scroll-margin-left Attenzione: Questa proprietà è efficace solo quando la posizione di adesione è impostata sulla sinistra dell'elemento figlio. per vedere L'attributo scroll-snap-type, e impostare l'effetto dell'attributo scroll-snap-align e scroll-margin-left sul padre dell'elemento, deve impostare l'effetto dell'attributo scroll-snap-align e scroll-margin-left sull'elemento figlio Proprietà.

Esempio

Esempio 1

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

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

Prova personalmente

Esempio 2: Raccolta di immagini

scroll-margin-left L'attributo può essere utilizzato in una galleria di immagini con comportamento di adesione. In questo esempio:scroll-margin-left Fare sapere all'utente che c'è un'altra immagine a sinistra. Scorciare oltre la prima immagine per vedere l'effetto:

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

Prova personalmente

Esempio 3: Posizione di adesione

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

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

Prova personalmente

Sintassi CSS

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

Valore dell'attributo

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

Specificare il valore della margine esterna di scorrimento sinistra in px, pt, cm e altri unità. È 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 animazione: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.scrollMarginLeft="20px"

Supporto del browser

Le numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo.

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