Tempo di lettura stimato: 2 minuti
State cercando una soluzione rapida per implementare lo scorrimento lento (aka smooth scroll)? Beh, CSS vi stupirà con la soluzione più veloce della storia:
html{
scroll-behavior: smooth;
}Easy peasy lemon squeezy. La proprietà scroll-behavior definisce il comportamento per lo scorrimento all’interno di un box. Essendo un funzionalità del browser, lo smooth scroll verrà applicato secondo le impostazioni di default dell’user agent. Il timing, ad esempio, non sarà modificabile.
Nota bene: Safari 14 e IE11 non supportano scroll-behavior1. Ad essere precisi Safari 14 lo supporta solo abilitando la funzione CSSOM View Smooth Scrolling dalle funzionalità sperimentali nel menu Sviluppo.
Se cercate una maggiore compatibilità, ecco allora la soluzione con VanillaJS, che sfrutta la proprietà behavior del metodo scroll()2. Anche in questo caso l’implementazione è molto semplice e non necessita di librerie esterne. Nemmeno di jQuery.
window.scrollTo({
top: 0;
left: 0;
behavior: 'smooth';
})Mettiamo che stiate cercando di implementare lo scorrimento lento funzioni su tutti i link di navigazione interna della pagina. Ecco un esempio che ho fatto per voi:
Nel caso abbiate bisogno di supporto per browser datati esiste un polyfill dedicato e disponibile al download al seguente URL https://iamdustan.github.io/smoothscroll. Eventualmente potete integrarlo nel vostro progetto attraverso package manager:
# npm npm install smoothscroll-polyfill --save # yarn yarn add smoothscroll-polyfill
Queste due soluzioni sono estremamente rapide e implementabili in pochi passi. Spero di esservi stato d’aiuto, se volete farmi delle domande nei commenti sarò più che lieto di rispondervi.
Happy coding!
Fonti
Lascia un commento