Imbottitura di scorrimento - Trucchi CSS

Anonim

scroll-paddingfa parte del CSS Scroll Snap Module. Lo snap a scorrimento si riferisce al "blocco" della posizione della finestra su elementi specifici della pagina durante lo scorrimento della finestra (o di un contenitore scorrevole). Pensa a un contenitore a scorrimento come mettere un magnete sopra un elemento che si attacca alla parte superiore della visualizzazione e forza la pagina a smettere di scorrere proprio lì.

scroll-paddingè una proprietà facoltativa per qualsiasi contenitore a scorrimento. I contenitori a scorrimento vengono definiti ogni volta che la scroll-snap-typeproprietà è impostata su qualsiasi altro valore none. Per ulteriori informazioni sui contenitori a scorrimento, vedere la scroll-snap-typevoce dell'almanacco.

OK, quindi passiamo allo scroll-padding

scroll-paddingviene utilizzato per regolare la regione di visualizzazione ottimale del contenitore a scatto. Ciò è utile se il contenitore ha elementi come un'intestazione fissa che oscurerebbe gli elementi all'interno o se il contenitore scorrevole ha bisogno di spazio per dare agli elementi interni spazio per respirare una volta che sono stati "agganciati" in posizione.

Un semplice esempio potrebbe essere utilizzato scroll-paddingper creare una spaziatura fissa 50pxnella parte superiore e sinistra del contenitore:

.scroll-container ( scroll-padding: 50px 0 0 50px; )
Le aree in rosa mostrano il riempimento dello scorrimento sul contenitore a scorrimento.

Sintassi

/* Shorthand */ scroll-padding: ( | auto )(1,4); /* Longhands */ scroll-padding-top: | auto; scroll-padding-right: | auto; scroll-padding-bottom: | auto; scroll-padding-left: | auto; /* inline-specific and block-specific properties as well */ scroll-padding-block: ( | auto )(1,2); scroll-padding-inline: ( | auto )(1,2);

Nota importante sui longhand: Chrome attualmente non supporta il formato longhand scroll-paddinge le scroll-marginproprietà. Usa l'abbreviazione per il massimo supporto del browser. Vedi questo problema nel bug tracker di chromium per maggiori dettagli e lo stato corrente.

Valori

scroll-padding accetta i seguenti valori:

  • autolascia che il riempimento sia determinato dal browser / user-agent. Generalmente, questo significa un valore di 0px, ma può essere diverso da zero se lo user-agent decide che un altro valore è più appropriato.
  • è scritto simile paddinge altre proprietà in cui il valore può essere definito con unità ( px, em, vh, etc.) o come percentuale del contenitore stesso.

Esempio

Vedi l'esempio di riempimento con scorrimento della penna
di CSS-Tricks (@ css-tricks) su CodePen.

Supporto browser

Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.

Desktop

Cromo Firefox IE Bordo Safari
69 68 11 * 79 11

Mobile / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 11.0-11.2

Relazionato

  • scroll-snap-type
  • scroll-margin
  • scroll-snap-align
  • scroll-snap-stop

Risorse

  • Raccomandazione del candidato CSS Scroll Snap W3C
  • Pratico CSS Scroll Snapping
  • Presentazione di CSS Scroll Snap Points