scroll-marginfa 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-marginè una proprietà facoltativa per un elemento a scorrimento all'interno di un contenitore a scorrimento. Per ulteriori informazioni sui contenitori a scorrimento, vedere la scroll-snap-typevoce dell'almanacco.
Immettere il margine di scorrimento
scroll-marginviene utilizzato per regolare l'area di snap di un elemento (la casella che definisce dove verrà eseguito lo snap dell'elemento). L'aggiunta scroll-marginè utile quando è necessario dare spazio a un elemento dal bordo del contenitore quando viene agganciato in posizione, ma consente situazioni in cui ogni elemento potrebbe richiedere una spaziatura leggermente diversa. Se tutti gli elementi hanno gli stessi requisiti di spaziatura, considerare l'utilizzo scroll-paddingsul contenitore padre anziché scroll-marginperché ciò influisce sulla spaziatura per tutti gli elementi all'interno del contenitore.
Un semplice esempio in cui scroll-marginconsente una spaziatura di 50 px intorno alla parte superiore e sinistra di un elemento ha questo aspetto:
.scroll-element ( scroll-margin: 50px 0 0 50px; )
scroll-marginsu questo elemento.
Sintassi
/* Shorthand */ scroll-margin: (1,4); /* Longhands */ scroll-margin-top: ; scroll-margin-right: ; scroll-margin-bottom: ; scroll-margin-left: ; /* inline-specific and block-specific properties as well */ scroll-margin-block: (1,2); scroll-margin-inline: (1,2);Nota importante sui longhand: Chrome (e forse altri browser) attualmente non supportano il formato scroll-paddinge le scroll-marginproprietà longhand . Usa l'abbreviazione per il massimo supporto del browser. Vedi questo problema sul bug tracker di chromium per maggiori dettagli e lo stato corrente.
Valori
scroll-marginaccetta il seguente lunghezza valore, che è scritto simile margine altre proprietà in cui il valore può essere definito con unità ( px, em, vh, ecc). Per ulteriori informazioni, vedere il modulo Valori e unità del W3C. Le percentuali non possono essere utilizzate scroll-marginsecondo le specifiche.
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-typescroll-marginscroll-snap-alignscroll-snap-stop
Risorse
- Raccomandazione del candidato CSS Scroll Snap W3C
- Pratico CSS Scroll Snapping
- Presentazione di CSS Scroll Snap Points