Scroll-snap-type - Trucchi CSS

Anonim

La scroll-snap-typeproprietà fa parte del CSS Scroll Snap Module. Lo snap a scorrimento si riferisce al "blocco" della posizione del riquadro di visualizzazione su elementi specifici della pagina durante lo scorrimento della finestra (o di un contenitore scorrevole). Immagina di mettere una calamita sopra un elemento che si attacca alla parte superiore della visualizzazione e costringe la pagina a smettere di scorrere proprio lì.

Questo è utile se vuoi fermare il browser in punti specifici della pagina. Ad esempio: un utente che sfoglia una galleria fotografica probabilmente non vuole scorrere fino a metà immagine - probabilmente preferirebbe che l'immagine si "agganci" nella posizione corretta mentre scorre. Lo snap a scorrimento offre agli sviluppatori un modo puro CSS per gestire questo comportamento.

scroll-snap-typeè una proprietà obbligatoria su qualsiasi contenitore scorrevole a cui si desidera aggiungere lo snap di scorrimento. Risponde a tre domande per un contenitore di scorrimento:

  1. Il contenitore utilizza lo snap a scorrimento?
  2. Su quale asse - x (orizzontale), y (verticale), blocco o in linea - dovrebbe essere applicato lo snap a scorrimento?
  3. Come dovrebbe comportarsi lo snap a scorrimento? Viene forzato il 100% delle volte o ha effetto solo quando l'utente si avvicina "abbastanza" a una posizione di snap? Ne parleremo più avanti.
.scroll-container ( /* Always force (mandatory) scrolling to a snap point on the y-axis */ scroll-snap-type: y mandatory; )

Sintassi

scroll-snap-type: none | ( x | y | block | inline | both ) ( mandatory | proximity )

Valori

scroll-snap-type accetta i seguenti valori:

  • none disabilita lo snap di scorrimento.
  • x abilita lo snap a scorrimento solo lungo l'asse x.
  • y abilita lo snap a scorrimento solo lungo l'asse y.
  • block abilita lo snap a scorrimento solo lungo l'asse del blocco.
  • inline abilita lo snap a scorrimento solo lungo l'asse in linea.
  • bothabilita lo snap a scorrimento lungo entrambi gli assi (che puoi pensare come xe y, o inlinee block.
  • mandatory è un valore di rigore che dice al browser di andare sempre in una posizione di snap quando non è in corso lo scorrimento.
  • proximityè un valore di rigore che dice al browser di andare in una posizione di snap se un'azione di scorrimento si avvicina molto a una posizione di snap. Se non è abbastanza vicino, il browser non dovrebbe scattare e lo scorrimento si comporterà normalmente.

Esempio

Vedi l'esempio del tipo di 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-padding
  • 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