CSS scroll-margin-left
La proprietà CSS3 scroll-margin-left imposta il margine sinistro per lo scorrimento
La proprietà scroll-margin-left
consente di definire uno spazio aggiuntivo a sinistra dell'elemento durante l’operazione di scroll-to-view. Questo permette di controllare la posizione visibile e migliorare l’esperienza utente.
Sintassi
Significato dei valori principali:
-
lunghezza: valore che definisce il margine sinistro per lo scorrimento. Può essere espresso in unità relative o assolute come
px
,em
,rem
,%
, ecc.
Esempio proprietà: scroll-margin-left
Codice Esempio: scroll-margin-left

html {
scroll-behavior: smooth;
}
.scroll-container {
text-align: left;
width: 262px;
height: 250px;
overflow-x: scroll;
display: flex;
box-sizing: border-box;
border: 5px solid #222;
scroll-snap-type: x mandatory;
}
.box {
flex: 0 0 250px;
width: 250px;
background-color: #56b6c2;
color: #fff;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
scroll-snap-align: start;
border: 1px solid #fff;
border-radius: 10px;
}
.target-left {
scroll-margin-left: 40px;
background-color: #e06c75;
}
Contenuto Esempio: scroll-margin-left
📌 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-type
attivo 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.
Prova questo esempio
DEMO
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.