CSS scroll-snap-align
La proprietà CSS3 scroll-snap-align controlla l'allineamento allo snap
La proprietà scroll-snap-align definisce come un elemento deve essere allineato all'interno del contenitore scrollabile quando lo snapping è attivo.
È particolarmente utile in layout orizzontali o verticali scrollabili dove si desidera che gli elementi si aggancino perfettamente all'inizio, centro o fine del contenitore.
Sintassi
Significato dei valori principali:
-
start: allinea l'inizio dell'elemento (in alto o a sinistra) al punto di snap del contenitore.
-
center: centra l'elemento nel contenitore al momento dello snap.
-
end: allinea la fine dell'elemento (in basso o a destra) al punto di snap del contenitore.
-
none: disattiva lo snap per l'elemento specifico, anche se il contenitore lo supporta.
Esempio proprietà: scroll-snap-align
Codice Esempio: scroll-snap-align
.scroll-container {
scroll-snap-type: x mandatory;
display: flex;
overflow-x: scroll;
width: 100%;
border: 2px solid #ccc;
scroll-padding: 20px;
gap: 10px;
}.scroll-item {
flex: 0 0 200px;
height: 200px;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
border-radius: 10px;
}.start { background-color: #007acc; scroll-snap-align: start; }
.center { background-color: #50a14f; scroll-snap-align: center; }
.end { background-color: #e06c75; scroll-snap-align: end; }
Contenuto Esempio: scroll-snap-align
Esempio di utilizzo di scroll-snap-align
Scrolla manualmente il contenitore in orizzontale, oppure usa il bottone per scrollarlo in vista.
In questo esempio, ogni elemento colorato ha un diverso tipo di allineamento allo scorrimento all'interno di un contenitore orizzontale con snap attivo:
Bottone per scroll automatico
CSS e HTML per il contenitore con snapping orizzontale:
<style>
.scroll-container {
scroll-snap-type: x mandatory;
display: flex;
overflow-x: scroll;
width: 100%;
border: 2px solid #ccc;
scroll-padding: 20px;
gap: 10px;
}
.scroll-item {
flex: 0 0 200px;
height: 200px;
scroll-snap-align: start;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
border-radius: 10px;
}
.start { background-color: #007acc; scroll-snap-align: start; }
.center { background-color: #50a14f; scroll-snap-align: center; }
.end { background-color: #e06c75; scroll-snap-align: end; }
</style>
<div class="scroll-container">
<div class="scroll-item start">Start</div>
<div class="scroll-item center">Center</div>
<div class="scroll-item end">End</div>
</div>
📌 Nota sull’utilizzo delle proprietà scroll-*
Le proprietà della famiglia scroll-* offrono controllo preciso sul comportamento e sul posizionamento dello scroll nei contenitori overflow. Tuttavia, la loro efficacia può variare in base al tipo di interazione, al contesto e al metodo di attivazione dello scroll. Di seguito una panoramica generale:
-
scroll-behavior: controlla se lo scroll avviene in modo fluido (smooth) o istantaneo (auto). È supportata in interazioni utente (tastiera, mouse) e via JavaScript con metodi comescrollIntoView()oscrollTo(). -
scroll-margin*: imposta uno spazio esterno virtuale tra il target dello scroll e il bordo del contenitore. È utile per evitare che l’elemento scrollato venga troppo "incollato" al bordo. Agisce solo quando l’elemento è il target di scroll (es.scrollIntoView()). -
scroll-padding*: definisce un’area interna del contenitore da considerare come "bordo attivo" per gli snap o il focus di scroll. È efficace nei contenitori conscroll-snap-typeattivo o nei layout con focus automatico. -
scroll-snap-type: abilita lo snap agli elementi figlio durante lo scroll, obbligando (o suggerendo) l’aggancio al più vicino snap-point. Richiede layout a scorrimento (overflow) e funzionerà solo se associato a elementi figli conscroll-snap-align. -
scroll-snap-align: definisce dove un elemento figlio deve "agganciarsi" all'interno del contenitore scrollabile (es. inizio, centro, fine). Funziona solo se il contenitore hascroll-snap-type. -
scroll-snap-stop: impedisce che l’elemento venga saltato durante uno scroll veloce. Utile per forzare lo stop su sezioni importanti, ma funziona solo con scroll naturali (touch, tastiera, oscrollIntoView), non conscrollTo({ left: ... }).
Compatibilità e contesto: molte di queste proprietà funzionano meglio con interazioni naturali (touchpad, touchscreen, tastiera) e possono non comportarsi come previsto quando lo scroll è simulato in modo diretto con JavaScript. Per ottenere effetti coerenti, è consigliato usare layout con display: flex o grid, dimensioni fisse e contenitori overflow con scroll-snap-type attivo.
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.108
