# Caroselli con scroll-snap: tre proprietà e nessun JavaScript

scroll-snap trasforma un contenitore con overflow in un carosello che si aggancia, senza JavaScript. Le tre proprietà, i limiti e la verifica da tastiera.

> Pagina: https://ui.eneawork.it/blog/css-scroll-snap-caroselli
> Markdown: https://ui.eneawork.it/blog/css-scroll-snap-caroselli.md

*2026-11-01*

Risposta breve: scroll-snap-type più scroll-snap-align trasformano un contenitore con overflow-x: auto in un carosello che si aggancia, senza JavaScript. Il trascinamento resta nativo e la tastiera continua a funzionare.

Il catalogo EneUI misura 111.985 componenti, 1.556 blocchi e 12.808 icone da 1.472 librerie, valori letti da /api/stats il 1 novembre 2026. Il carosello dell'articolo è stato verificato a 360 px con trascinamento touch, trackpad e tastiera: nei tre casi lo scatto cade sullo stesso elemento. Il comando sotto si esegue in locale, senza account.

## Le tre proprietà che servono

## Il codice

.carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; overscroll-behavior-inline: contain; scrollbar-width: none; } .carousel > * { flex: 0 0 min(80vw, 22rem); scroll-snap-align: start; } @media (prefers-reduced-motion: reduce) { .carousel { scroll-behavior: auto; } }

overscroll-behavior-inline impedisce che il gesto prosegua sulla pagina quando il carosello arriva in fondo: senza, su un telefono lo scorrimento verticale si blocca. min(80vw, 22rem) dà una scheda quasi piena su telefono e fissa su desktop.

## mandatory o proximity

mandatory obbliga lo scatto e va bene per schede della stessa larghezza. Quando le schede hanno misure diverse lo scatto sembra un salto: in quel caso proximity è più gentile, perché aggancia solo se sei già vicino al punto.

Il supporto è ampio dal 2019. Su Safari datato serve ancora -webkit-overflow-scrolling: touch per lo scorrimento inerziale, e la proprietà va scritta prima di overflow.

## Il limite

Il carosello con scroll-snap non ha frecce, né contatore, né etichetta. Chi usa uno screen reader non sa quante schede ci sono: serve un'etichetta accessibile sul contenitore e un indicatore testuale del tipo «3 di 8». Il CSS da solo non li dà, e senza di loro il carosello è un elenco orizzontale invisibile.

## Come verificarlo

## Dove continuare

Nel catalogo: blocco testimonial, componenti e blocchi. Le guide: centrare un elemento e navbar su mobile; il confronto: Tailwind contro CSS Modules.

## FAQ

### Serve ancora una libreria di caroselli?

Per lo scorrimento no. Una libreria serve se vuoi autoplay, loop infinito o frecce con stato: cose che scroll-snap non fa.

### Perché lo scatto non funziona?

Quasi sempre perché il contenitore non ha un overflow dichiarato, o perché la proprietà è su un antenato. scroll-snap-type va sull'elemento che scorre.

### Come nascondo la scrollbar?

Con scrollbar-width: none e ::-webkit-scrollbar per i motori più vecchi. Ricorda che nascondere la barra toglie anche l'indizio che si può scorrere.

### Funziona in verticale?

Sì, con scroll-snap-type: y. Su una pagina intera è però invasivo: la userei solo dentro un pannello con altezza fissa.

### Il carosello fa male al CLS?

No, se le schede hanno un rapporto dichiarato. Il rischio è la larghezza, non l'altezza: una scheda senza misura cambia il numero di elementi visibili mentre carica.