Smooth scoll con VanillaJS o CSS3

Smooth Scroll rapido con CSS3 o VanillaJS

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 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

Di Giovanni

Front-end Developer, WordPress Specialist e Consulente Digitale. Supporto Aziende e Freelance nello sviluppo dei progetti digitali.

Lascia un commento

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