Proprietà CSS scroll-padding-right

Definizione e uso

scroll-padding-right l'attributo specifica la distanza dalla parte destra del contenitore alla posizione di adesione dell'elemento figlio.

la posizione di adesione si riferisce alla posizione in cui l'elemento figlio si adatta nel contenitore quando la scorrimento si ferma.

la posizione di adesione è determinata da scroll-snap-align impostazione dell'attributo, ma potrebbe essere influenzata anche dall'attributo CSS direction e writing-mode l'impatto.

Attenzione:此属性仅在吸附位置设置在子元素右侧时有效。

要看到 scroll-padding-right L'attributo, e questo attributo è efficace solo quando la posizione di adesione è impostata sulla destra dell'elemento figlio. scroll-snap-align L'effetto dell'attributo, impostato sul padre dell'elemento, deve essere impostato sull'elemento figlio per vedere scroll-padding-right e scroll-snap-type Attributo.

Esempio

Esempio 1

Imposta la spaziatura interna di scorrimento a 20px dalla destra del contenitore alla posizione di adesione:

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

Prova personalmente

Esempio 2: Galleria di immagini

scroll-padding-right L'attributo può essere utilizzato in gallerie di immagini con comportamento di adesione per spingere le immagini dietro l'elemento fisso nella vista:

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

Prova personalmente

Esempio 3: Impostazione della spaziatura interna di scorrimento a destra

Quando si impostano comportamenti di adesione in entrambe le direzioni, è anche possibile impostare su scroll-padding-right L'attributo. Scorri orizzontalmente al seguente elemento per vedere l'effetto:

#container > div {
  scroll-padding-right: 30px;
}

Prova personalmente

Esempio 4: Posizione di adesione

Per farlo: scroll-padding-right L'attributo è attivo, la posizione di adesione deve essere impostata sulla destra dell'elemento figlio. In questo esempio:direction Il valore dell'attributo 'rtl' cambia la posizione di adesione da destra dell'elemento figlio a sinistra. Quando si utilizza questo codice:scroll-padding-right L'attributo non avrà più effetto:

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

Prova personalmente

Sintassi CSS

scroll-padding-right: auto|value|initial|inherit;

Valore dell'attributo

Dettagli tecnici

Supporto del browser

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

Pagine correlate

Riferimento:Proprietà direction CSS

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type

Riferimento:Attributo writing-mode CSS