Proprietà CSS scroll-padding

Definizione e uso

scroll-padding L'attributo specifica la distanza dal contenitore alla posizione di adesione dell'elemento figlio.

Questo significa che, quando si ferma lo scorrimento, la scorrimento si adatta rapidamente e si ferma alla distanza specificata dal contenitore alla posizione di adesione dell'elemento figlio.

La posizione di adesione è la posizione in cui l'elemento figlio si posiziona in modo fisso nel contenitore quando la scorrimento si ferma.

scroll-padding L'attributo è un attributo abbreviato dei seguenti attributi:

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

Se l'attributo scroll-padding ha quattro valori:

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

Se l'attributo scroll-padding ha tre valori:

scroll-padding: 15px 30px 60px;
  • La distanza superiore è di 15px
  • La distanza da sinistra e destra è di 30px
  • La distanza inferiore è di 60px

Se l'attributo scroll-padding ha due valori:

scroll-padding: 15px 30px;
  • La distanza tra la parte superiore e inferiore è di 15px
  • La distanza da sinistra e destra è di 30px

Se l'attributo scroll-padding ha un valore:

scroll-padding: 10px;
  • La distanza in tutte le quattro direzioni è di 10px

vedere scroll-padding attributo sul padre dell'elemento, per ottenere l'effetto scroll-snap-align attributo, e impostare scroll-padding e scroll-snap-type attributo.

Attenzione:Nell'esempio seguente, la spaziatura interna di scorrimento è impostata su tutti i lati, ma a causa scroll-snap-align Impostato su "start", quindi solo la spaziatura interna di scorrimento superiore cambia il comportamento di scorrimento.

Esempio

Esempio 1

Impostare la spaziatura interna di scorrimento dalla casella al punto di adesione a 20px:

div {
  scroll-padding: 20px;
}

Prova tu stesso

Esempio 2: Galleria di immagini

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

#container {
  scroll-padding: 30px 0 0 0;
}
Elemento superiore fisso
Pechino Ballerina Wuhan Tulipano Hangzhou

Prova tu stesso

Esempio 3: Impostazione della spaziatura interna di scorrimento inferiore e destra

scroll-padding L'attributo può essere impostato sia nella parte inferiore che nella parte destra del contenitore. Scorrere orizzontalmente e verticalmente per vedere l'effetto:

#container {
  scroll-padding: 0 10px 30px 0;
}





Prova tu stesso

Sintassi CSS

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

Valore dell'attributo

Valore Descrizione
auto Valore predefinito. Il browser calcola la spaziatura interna.
length

Specificare la spaziatura interna di scorrimento con unità come px, pt, cm.

Non sono ammessi valori negativi. Vedi:Unità CSS.
% Specificare la percentuale di margine interna rispetto alla larghezza dell'elemento contenitore.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Eredita questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

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

Supporto del browser

I 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à CSS scroll-padding-bottom

Riferimento:Proprietà CSS scroll-padding-left

Riferimento:Proprietà CSS scroll-padding-right

Riferimento:Proprietà CSS scroll-padding-top

Riferimento:Proprietà CSS scroll-snap-align

Riferimento:Proprietà CSS scroll-snap-type