CSS scroll-snap-type
La proprietà CSS3 scroll-snap-type attiva lo snap su contenitori scrollabili
La proprietà scroll-snap-type definisce su quale asse (orizzontale o verticale) applicare lo snap e se il comportamento debba essere obbligatorio
(mandatory) o solo se vicino al punto di snap (proximity). È essenziale per attivare lo snapping e deve essere impostata sul contenitore scrollabile.
Sintassi
Significato dei valori principali:
-
x: attiva lo snap sull'asse orizzontale.
-
y: attiva lo snap sull'asse verticale.
-
block: segue l'asse di scorrimento del contenuto (di solito verticale).
-
inline: segue l'asse inline (di solito orizzontale nei testi da sinistra a destra).
-
mandatory: forza il contenitore ad agganciarsi sempre a un punto di snap.
-
proximity: effettua lo snap solo se l'elemento è vicino a un punto di snap.
Esempio proprietà: scroll-snap-type
Codice Esempio: scroll-snap-type
.snap-type-container {
scroll-snap-type: x mandatory;
overflow-x: auto;
display: flex;
gap: 12px;
padding: 15px;
border: 2px solid #bbb;
width: 100%;
}.snap-type-item {
flex: 0 0 220px;
height: 160px;
scroll-snap-align: start;
background-color: #61afef;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
border-radius: 10px;
}
Contenuto Esempio: scroll-snap-type
Esempio di utilizzo di scroll-snap-type
In questo esempio, il contenitore scrollabile utilizza scroll-snap-type: x mandatory per creare uno snapping orizzontale obbligatorio tra le card.
Bottone per scroll automatico
CSS e HTML per l'esempio con scroll-snap-type:
<style>
.snap-type-container {
scroll-snap-type: x mandatory;
overflow-x: auto;
display: flex;
gap: 12px;
padding: 15px;
border: 2px solid #bbb;
width: 300px;
}
.snap-type-item {
flex: 0 0 220px;
height: 160px;
scroll-snap-align: start;
background-color: #61afef;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
color: white;
border-radius: 10px;
}
</style>
<div class="snap-type-container">
<div class="snap-type-item">Item 1</div>
<div class="snap-type-item">Item 2</div>
<div class="snap-type-item">Item 3</div>
<div class="snap-type-item">Item 4</div>
<div class="snap-type-item">Item 5</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.214
