CSS Scroll Snap: caroselli e sezioni a tutta pagina
Guida a CSS Scroll Snap
CSS Scroll Snap: caroselli, sezioni a tutta pagina e un playground dal vivo
Prova ogni valore di scroll-snap-type, scroll-snap-align e scroll-snap-stop in uno scroller dal vivo, poi copia un carosello solo CSS e sezioni a tutta pagina che restano accessibili.
Lo scroll snap fa fermare un box scorrevole su figli scelti invece che in un punto qualsiasi. Metti scroll-snap-type: x mandatory (oppure y, o proximity) sul contenitore di scroll, poi scroll-snap-align: start, center o end su ogni figlio. Aggiungi scroll-padding per gli header fissi e scroll-snap-stop: always per fermarti su ogni elemento.
Le proprietà di scroll snap in sintesi
Proprietà
Si imposta su
Valori
Contenitore di scroll
none, x, y, block, inline, both + mandatory o proximity
Ogni figlio
none, start, center, end (uno o due valori)
Ogni figlio
normal (può essere superato), always (deve fermarsi)
Contenitore di scroll
Rientro in lunghezza o percentuale, come il padding
Ogni figlio
Estensione in lunghezza attorno all'area di snap
Un tempo lo scroll snap richiedeva una libreria per caroselli. Oggi poche righe di CSS ti danno card da scorrere con lo swipe, una galleria a pagine o sezioni a schermo intero, con scroll inerziale e supporto da tastiera gestiti dal browser. Usa il playground per sentire la differenza tra ogni valore prima di copiare il codice.
Scegli nel playground un asse e un livello di rigidità per il contenitore.
Scegli come si allinea ogni slide e se lo scroll deve fermarsi su ogni slide.
Scorri l'anteprima con trackpad, rotella del mouse, tocco o tasti freccia dopo averci cliccato dentro.
Copia il CSS generato, oppure prendi uno degli schemi completi più in basso.
Quando un asse è indicato senza una parola chiave di rigidità, viene usato proximity.
Preferisci proximity per i contenuti lunghi: mandatory può bloccare i lettori quando un figlio è più alto del contenitore.
Rendi lo scroller focalizzabile con tabindex="0" e un nome accessibile, così chi usa la tastiera può scorrerlo con i tasti freccia.
Lo snap funziona con scrollIntoView() e con i link ad ancora, quindi semplici pulsanti avanti e indietro possono pilotare un carosello.
Domande frequenti
Qual è la differenza tra mandatory e proximity?
Con mandatory il contenitore si ferma sempre su una posizione di snap quando lo scroll termina. Con proximity fa lo snap solo quando lo scroll finisce vicino a una di esse, il che lascia le persone libere di leggere nel mezzo. proximity è il valore predefinito quando scrivi solo l'asse.
Perché lo scroll snap non funziona?
Le cause abituali sono: scroll-snap-type è sui figli invece che sul genitore che scorre, il genitore non va davvero in overflow (imposta overflow-x: auto e una dimensione fissa), oppure i figli non hanno scroll-snap-align. Per lo snap a livello di pagina il contenitore è html, non body.
Come evito che un header fisso copra le sezioni agganciate?
Imposta scroll-padding-top sul contenitore di scroll pari all'altezza dell'header, per esempio html { scroll-padding-top: 64px; }. Le sezioni agganciate e i salti alle ancore si fermano così sotto l'header invece che dietro di esso.
Posso creare un carosello senza JavaScript?
Sì per lo swipe e lo scroll: una riga flex con overflow-x: auto e snap x mandatory è un carosello funzionante. Gli indicatori a punti che mostrano la slide corrente, la riproduzione automatica e il loop richiedono comunque un po' di script.
CSS scroll snap è supportato ovunque?
scroll-snap-type è Baseline ampiamente disponibile dal 2022 su Chrome, Edge, Firefox e Safari, e scroll-snap-stop da luglio 2022. Puoi usarlo senza fallback; i browser che non lo supportano semplicemente scorrono liberamente.
Caroselli che le persone riescono davvero a usare
Lascia intravedere la card successiva rendendo ogni slide più stretta del contenitore, per esempio flex: 0 0 85%. Il bordo visibile dice alle persone che c'è altro da scorrere, cosa che una slide perfettamente adattata non fa.
Dai allo scroller un'etichetta come aria-label="Customer photos" e mantieni le slide come una lista. Non nascondere agli screen reader le slide fuori schermo, e non avviare mai la riproduzione automatica senza un controllo di pausa.
Sezioni a tutta pagina senza trappole
Lo snap a tutta altezza fa colpo in una demo e infastidisce i lettori quando una sezione ha più testo di quanto ne entri nello schermo, perché lo snap mandatory continua a trascinarli oltre. Usa proximity per le sezioni di pagina, oppure assicurati che ogni sezione stia davvero nello schermo di un telefono.
Rispetta reduced motion disattivando scroll-behavior: smooth dentro una query prefers-reduced-motion: reduce. Lo snap in sé si può mantenere, perché si sposta solo quanto ha chiesto il lettore.
Carosello di card solo CSS
Carosello orizzontale con la card successiva che si intravede
Fai swipe, scorri lateralmente o clicca dentro e usa i tasti freccia. Ogni card è larga l'80 percento, quindi la successiva si vede sul bordo.
Sezioni a tutta pagina
Sezioni verticali che si agganciano sotto un header fisso
Lo snap è su html, lo scroller della pagina. scroll-padding-top tiene le sezioni lontane da un header di 64px, e proximity evita di bloccare le sezioni lunghe.
Pulsanti avanti e indietro
Pilotare il carosello con scrollBy
Il browser completa lo spostamento sul punto di snap più vicino, quindi scorrere della larghezza di una card arriva esattamente sulla card successiva.
Playground di scroll snap
Asse
Rigidità
Allineamento delle slide
Fermati su ogni slide
Anteprima di scroll snap, scorri o usa i tasti freccia