Smooth scoll con VanillaJS o CSS3

Home » Blog » Smooth scoll con VanillaJS o CSS3
Smooth Scroll rapido con CSS3 o VanillaJS

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.

Lo smooth scrolling non è nativo in Safari 14, ma è possibile abilitarlo dal 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

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Cerchi qualcosa in particolare?

Questo sito produce 0.14g di CO2 per ogni visita, è sostenuto da fonti rinnovabili ed è il più pulito dell’87% dei siti registrati da websitecarbon.com.
Vai al risultato completo

iubenda Certified Bronze Partner