Proprietà CSS scroll-behavior
Usa la proprietà CSS scroll-behavior per specificare il comportamento dello scorrimento. Valori ed esempi della proprietà.
La proprietà CSS scroll-behavior definisce se uno scorrimento attivato dalla navigazione o da uno script (una "scrolling box" che salta a un'ancora o a una coordinata) debba essere smooth (animato) o instant (un salto singolo). Per impostazione predefinita è auto, che corrisponde a un salto immediato.
Questa pagina illustra cosa fa la proprietà, dove dichiararla, la differenza tra i suoi valori, i problemi comuni e la relazione con le API di scorrimento JavaScript.
Quando usarla?
Il caso d'uso più comune è la navigazione all'interno della pagina. Quando un link punta a un frammento come <a href="#section">, il browser di norma salta immediatamente all'elemento di destinazione. Impostare scroll-behavior: smooth sul contenitore di scorrimento trasforma quel salto in uno scorrimento animato piacevole — senza una singola riga di JavaScript.
html {
scroll-behavior: smooth;
}Dove dichiararla
Due regole generano spesso confusione:
- Influisce solo sugli scorrimenti programmatici e attivati dalla navigazione — click su un'ancora, chiamata a
element.scrollIntoView(),window.scrollTo(), ecc. Non ha effetto sugli scorrimenti eseguiti dall'utente con la rotella del mouse, il trackpad o la barra di scorrimento. - Per lo scorrimento del viewport, impostala su
html, non subody. Il valore dichiarato sull'elemento body non si propaga al viewport e verrebbe ignorato. Dichiarala sull'elemento html (la scrolling box radice). Per qualsiasi altro contenitore con scorrimento, dichiarala sul contenitore stesso.
Gli user agent sono autorizzati a ignorare questa proprietà e verrà saltata per gli utenti che richiedono una riduzione del movimento (vedi Accessibilità più avanti).
| Valore iniziale | auto |
|---|---|
| Si applica a | Scrolling box. |
| Ereditata | No. |
| Animabile | No. |
| Versione | CSSOM View Module (Working Draft) |
| Sintassi DOM | object.style.scrollBehavior = "smooth"; |
Sintassi
Sintassi CSS di scroll-behavior
scroll-behavior: auto | smooth | initial | inherit;Esempio della proprietà scroll-behavior con il valore "auto":
Esempio di codice CSS scroll-behavior
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
scroll-behavior: auto;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior property example</h2>
<div class="main" id="element1">
<h2>Element 1</h2>
<a href="#element2">Click to scroll to Element 2</a>
</div>
<div class="main" id="element2">
<h2>Element 2</h2>
<a href="#element1">Click to scroll to Element 1</a>
</div>
</body>
</html>Esempio della proprietà scroll-behavior con il valore "smooth":
CSS scroll-behavior con valore smooth, esempio
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
html {
scroll-behavior: smooth;
}
#element1 {
height: 600px;
background-color: #ccc;
}
#element2 {
height: 600px;
background-color: #8ebf42;
}
</style>
</head>
<body>
<h2>Scroll-behavior property example</h2>
<div class="main" id="element1">
<h2>Element 1</h2>
<a href="#element2">Click to scroll to Element 2</a>
</div>
<div class="main" id="element2">
<h2>Element 2</h2>
<a href="#element1">Click to scroll to Element 1</a>
</div>
</body>
</html>Con smooth, fare clic su uno dei due link anima la pagina tra i due blocchi invece di saltare istantaneamente. Solo il valore di scroll-behavior differisce dall'esempio precedente.
Valori
| Valore | Descrizione |
|---|---|
| auto | Predefinito. Lo scorrimento avviene in un singolo salto immediato, senza animazione. |
| smooth | Lo scorrimento viene animato in modo fluido tra la posizione iniziale e quella finale. |
| initial | Imposta la proprietà al suo valore predefinito (auto). |
| inherit | Eredita il valore dall'elemento padre. |
Applicare lo smoothing a un contenitore specifico
scroll-behavior non è limitata alla pagina. Dichiarala su qualsiasi elemento che ha la propria barra di scorrimento (un box con overflow: auto o overflow: scroll) e anche gli scorrimenti programmatici all'interno di quel contenitore verranno animati. Vedi overflow per come creare box con scorrimento.
.panel {
height: 300px;
overflow-y: auto;
scroll-behavior: smooth;
}// Smoothly scrolls .panel to its bottom because the
// container has scroll-behavior: smooth.
const panel = document.querySelector('.panel');
panel.scrollTop = panel.scrollHeight;Relazione con le API di scorrimento JavaScript
scroll-behavior è il modo CSS per impostare l'animazione predefinita di un contenitore di scorrimento. Le API di scorrimento possono anche richiedere lo smoothing per singola chiamata tramite un'opzione behavior, che sovrascrive il valore CSS per quella singola chiamata:
// One-off smooth scroll, regardless of the CSS scroll-behavior value.
element.scrollIntoView({ behavior: 'smooth' });
window.scrollTo({ top: 0, behavior: 'smooth' });Usa la proprietà CSS quando vuoi che ogni salto di navigazione/ancora in un contenitore sia fluido; usa l'opzione JS per uno scorrimento singolo e occasionale.
Accessibilità
Lo scorrimento fluido può causare disagio agli utenti sensibili al movimento. Rispetta la media query prefers-reduced-motion in modo che l'animazione venga disabilitata quando l'utente ha chiesto al sistema di ridurre il movimento:
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}Proprietà correlate
- overflow — crea le scrolling box che
scroll-behavioranima. - scrollbar — personalizza la barra di scorrimento di quelle box.
- offset-anchor — controlla il punto di ancoraggio utilizzato durante le trasformazioni.
- HTML links — le ancore
href="#id"che attivano lo scorrimento fluido.