Scroll-snap-align - Trucchi CSS

Anonim

scroll-snap-alignfa 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-snap-alignè una proprietà richiesta 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. scroll-snap-aligndice al browser quale parte di un elemento dovrebbe essere allineato quando si incontra un punto di snap: Qualora l'elemento calamitato al start, centero enddel contenitore padre che contiene la scroll-snap-typeproprietà?

Se vuoi che un elemento si agganci in posizione all'inizio di quell'elemento, dagli un scroll-snap-alignvalore in questo modo:

/* Assuming this element is a child of a container with `scroll-snap-type` set */ .element ( scroll-snap-align: start; )

Sintassi

scroll-snap-align: ( none | start | end | center )(1,2)

È possibile specificare fino a 2 valori per questa proprietà, che rappresentano rispettivamente gli assi di blocco e in linea. Se si fornisce solo 1 valore, tale valore verrà utilizzato per entrambi gli assi.

Valori

scroll-snap-align accetta i seguenti valori:

  • none disabilita lo snap di scorrimento sull'elemento
  • start allinea l'inizio dell'elemento con lo snapport del contenitore di scorrimento quando viene agganciato in posizione
  • end allinea l'estremità dell'elemento con lo snapport del contenitore di scorrimento quando scatta in posizione
  • center allinea il centro dell'elemento con lo snap del contenitore di scorrimento quando viene agganciato in posizione

Esempio

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-padding
  • scroll-snap-stop

Risorse

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