Proprietà CSS scroll-snap-align

Definizione e uso

scroll-snap-align La proprietà specifica che quando smetti di scorrere, l'elemento si attaccherà alla posizione dell'elemento in evidenza.

Per implementare il comportamento di adesione alla scorrimento, è necessario impostare la proprietà sull'elemento figlio scroll-snap-align proprietà e impostarla sul elemento padre scroll-snap-type Attributo.

Esempio

Esempio 1

Quando l'utente ferma lo scorrimento, il elemento più vicino si attacca al centro:

div {
  scroll-snap-align: center;
}

Prova da solo

Esempio 2: Galleria di immagini

scroll-snap-align L'attributo è particolarmente adatto per l'esplorazione a scorrimento delle gallerie di immagini. Qui, la direzione di scorrimento è orizzontale e il modo di allineamento adesione è al centro. Quando l'utente rilascia la barra di scorrimento, l'immagine più vicina si adatterà al centro dell'area scorribile. Clicca su un'immagine, poi usa i tasti freccia a destra e a sinistra per esplorare:

#container > img {
  scroll-snap-align: none center;
}
Pechino Danzatore Wuhan Tulipano Hangzhou

Prova da solo

ponte di valle in montagne della giungla uomo con macchina fotografica Cinque Terre

Esempio 3: Allineamento adesione in direzione block durante lo scorrimento verticale

Quando si scorre verticalmente,scroll-snap-align L'attributo può anche essere impostato come posizione iniziale dell'elemento nella direzione block:

#container > div {
  scroll-snap-align: start none;
}

Prova da solo

Sintassi CSS

scroll-snap-align: none|start|end|center|block inline|initial|inherit;

Valore dell'attributo

Valore Descrizione
none Nessun effetto di adesione alla scorrimento. Valore predefinito.
start Sulla ascissa e l'ordinata, l'adesione alla scorrimento avviene all'inizio dell'elemento.
end Sulla ascissa e l'ordinata, l'adesione alla scorrimento avviene alla fine dell'elemento.
center Sulla ascissa e l'ordinata, l'adesione alla scorrimento avviene al centro dell'elemento.
block inline Sintassi a due valori. Il primo valore specifica il modo di adesione in direzione block, il secondo valore specifica il modo di adesione in direzione inline.
initial Imposta questo attributo al suo valore predefinito. Vedi initial.
inherit Eruga questo attributo dal suo elemento padre. Vedi inherit.

Dettagli tecnici

Valore predefinito: none
Ereditarietà: No
Produzione di animazioni: Non supportato. Vedi:Proprietà correlate agli animazioni.
Versione: CSS3
Sintassi JavaScript: object.style.scrollSnapAlign="start"

Supporto del browser

I numeri nella tabella rappresentano la versione del browser che supporta completamente l'attributo per la prima volta.

Chrome Edge Firefox Safari Opera
69.0 79.0 68.0 11.0 56.0

Pagine correlate

Riferimento:Proprietà CSS scroll-snap-type