La scroll-behaviorproprietà in CSS ci consente di definire se la posizione di scorrimento del browser salta in una nuova posizione o anima in modo fluido la transizione quando un utente fa clic su un collegamento che mira a una posizione ancorata all'interno di una casella di scorrimento.
html ( scroll-behavior: smooth; )Spiegazione più profonda
Aspetta, aspetta, cos'è questa scatola a scorrimento di cui parliamo? È un elemento con un contenuto che supera i suoi limiti.
Vedi il Pen Scrolling Box di CSS-Tricks (@ css-tricks) su CodePen.
Notate come la casella nella demo sopra ha un'altezza fissa di 200px? Qualsiasi contenuto che supera tale altezza è fuori dai limiti del riquadro e abbiamo aggiunto overflow-y: scrollper rendere quel contenuto aggiuntivo accessibile con lo scorrimento verticale. Questo è ciò che intendiamo per casella a scorrimento.
Supponiamo ora di aggiungere una navigazione nella parte superiore del riquadro con ogni collegamento che ha come target le tre sezioni di contenuto:
Vedi il Pen Scrolling Box w / Nav di CSS-Tricks (@ css-tricks) su CodePen.
Ogni collegamento porta l'utente direttamente alle diverse sezioni di contenuto all'interno della casella di scorrimento. Per impostazione predefinita, quella transizione tra è un brusco salto.
Questo tipo di salto può essere stridente. È qui che scroll-behaviorentra in gioco e ci consente di impostare una transizione di scorrimento fluida. Questo genere di cose utilizzava Javascript di fantasia ma scroll-behaviorci darà la possibilità di farlo in modo nativo in CSS, una volta che il supporto del browser migliora.
Sintassi
.module ( scroll-behavior: ( auto | smooth ); )Valori
La scroll-behaviorproprietà accetta due valori, che essenzialmente attivano e disattivano la funzione di scorrimento uniforme.
auto(predefinito): questo valore consente il salto improvviso tra gli elementi all'interno della casella di scorrimento.smooth: Fedele al suo nome, questo valore è la transizione animata uniforme tra gli elementi all'interno della casella di scorrimento.
Demo
La seguente demo funzionerà solo su Chrome 61+, Firefox 36+ e Opera 48+ al momento della stesura di questo documento.
Vedi il Pen Scrolling Box w / `scroll-behavior` di CSS-Tricks (@ css-tricks) su CodePen.
Supporto browser
Questi dati di supporto del browser provengono da Caniuse, che ha più dettagli. Un numero indica che il browser supporta la funzione a quella versione e successive.
Desktop
| Cromo | Firefox | IE | Bordo | Safari |
|---|---|---|---|---|
| 61 | 36 | No | 79 | No |
Mobile / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | No |
Maggiori informazioni
- Modulo di visualizzazione CSSOM: la bozza delle specifiche, inclusa la proprietà CSS. L'attuale bozza include una raccomandazione per spostare la
scroll-behaviorspecifica su un'altra, quindi sarà interessante vedere dove atterra. - Mozilla Developer Network: il riferimento MDN per la specifica
- Stato di Microsoft Edge Platform: attualmente visualizza lo stato di questa funzionalità come In considerazione
- Stato piattaforma Chrome: attualmente mostra lo stato di questa funzione come In sviluppo e include gli stati per altre piattaforme come parte
- Snippet a scorrimento fluido: frammenti per abilitare lo scorrimento fluido con Javascript e jQuery
- Scorrimento fluido e accessibilità: un post CSS-Tricks sull'impatto dello scorrimento fluido abilitato per Javascript