Se c'è una cosa che le persone vogliono davvero dallo scorrimento, è che sia fluido. In passato, Chrome ha avuto uno scorrimento fluido in alcuni punti, ad esempio quando gli utenti scorrono con i trackpad o lanciano una pagina sui dispositivi mobili. Tuttavia, se l'utente ha collegato un mouse, avrà un comportamento di scorrimento "a gradini" più discontinuo, che è molto meno gradevole esteticamente. Tutto questo sta per cambiare in Chrome 49.
La soluzione al comportamento di scorrimento a gradini nativo e basato sugli input per molti sviluppatori è stata l'utilizzo di librerie, il cui obiettivo è mapparlo a qualcosa di più fluido e piacevole per gli occhi. Anche gli utenti lo fanno tramite le estensioni. Tuttavia, sia le librerie sia le estensioni che modificano lo scorrimento presentano degli svantaggi:
- Una sensazione di Vallée inquietante. Ciò si manifesta in due modi: in primo luogo, un sito potrebbe avere un comportamento di scorrimento fluido, mentre un altro potrebbe non averlo, quindi l'utente potrebbe finire per sentirsi disorientato dall'incongruenza. In secondo luogo, la fisica della fluidità della libreria non corrisponderà necessariamente a quella della piattaforma. Pertanto, anche se il movimento può essere fluido, può sembrare errato o innaturale.
- Aumento della propensione a contese e scatti nel thread principale. Come per qualsiasi codice JavaScript aggiunto alla pagina, si verificherà un aumento del carico della CPU. Non è necessariamente un disastro, a seconda di cosa fa la pagina, ma se c'è un'operazione di lunga durata nel thread principale e lo scorrimento è stato accoppiato al thread principale, il risultato netto può essere uno scorrimento a scatti e un comportamento discontinuo.
- Più manutenzione per gli sviluppatori, più codice da scaricare per gli utenti. Una raccolta per lo scorrimento fluido deve essere aggiornata e mantenuta e aumenta il peso complessivo della pagina del sito.
Spesso questi svantaggi si verificano anche per molte librerie che si occupano di comportamenti di scorrimento, che si tratti di effetti di parallasse o di altre animazioni accoppiate allo scorrimento. Spesso causano scatti, ostacolano l'accessibilità e in genere danneggiano l'esperienza utente. Lo scorrimento è un'interazione fondamentale del web e deve essere modificato con le librerie con estrema cautela.
In Chrome 49, il comportamento di scorrimento predefinito cambierà su Windows, Linux e ChromeOS. Il vecchio comportamento di scorrimento a gradini non sarà più disponibile e lo scorrimento sarà fluido per impostazione predefinita. Non sono necessarie modifiche al codice, tranne forse la rimozione di eventuali librerie di scorrimento fluido, se le hai utilizzate.
Altre funzionalità di scorrimento
Sono in fase di sviluppo anche altri miglioramenti relativi allo scorrimento che vale la pena menzionare. Molti di noi vogliono effetti associati allo scorrimento, come la parallasse, lo scorrimento fluido fino a un frammento di documento (ad esempio example.com/#somesection). Come accennato in precedenza, gli approcci attualmente in uso possono spesso essere dannosi sia per gli sviluppatori che per gli utenti. Esistono due standard di piattaforma in fase di sviluppo che potrebbero essere utili: i worklet del compositore e la proprietà CSS scroll-behavior.
Houdini
I worklet del compositore fanno parte di Houdini e devono ancora essere completamente specificati e implementati. Detto questo, man mano che le patch vengono rilasciate, potrai scrivere codice JavaScript che viene eseguito nell'ambito della pipeline del compositore, il che in genere significa che gli effetti accoppiati allo scorrimento come la parallasse verranno mantenuti perfettamente sincronizzati con la posizione di scorrimento corrente. Dato il modo in cui lo scorrimento viene gestito al momento, in cui gli eventi di scorrimento vengono inviati periodicamente al thread principale (e possono essere bloccati da altri lavori del thread principale), questo rappresenterebbe un enorme passo avanti. Se ti interessano i worklet di compositor o una delle altre nuove funzionalità di Houdini, dai un'occhiata al post di Surma sull'introduzione a Houdini, alle specifiche di Houdini e condividi le tue opinioni nella mailing list di Houdini.
scroll-behavior
Per quanto riguarda lo scorrimento basato su frammenti, la proprietà CSS scroll-behavior è un'altra soluzione che potrebbe essere utile. Se vuoi provarlo, ti farà piacere sapere che è già disponibile in Firefox e puoi attivarlo in Chrome Canary utilizzando il flag "Attiva funzionalità sperimentali della piattaforma web". Se imposti, ad esempio, l'elemento <body> su scroll-behavior: smooth, tutti gli scorrimenti attivati dalle modifiche ai frammenti o da window.scrollTo verranno animati senza problemi. È molto meglio di dover utilizzare e gestire il codice di una libreria che tenta di fare la stessa cosa. Con un elemento così fondamentale come lo scorrimento, è molto importante evitare di deludere le aspettative degli utenti, quindi, anche se queste funzionalità sono in continua evoluzione, vale la pena adottare un approccio di miglioramento progressivo e rimuovere eventuali librerie che tentano di eseguire il polyfill di questi comportamenti.
Vai avanti e scorri
A partire da Chrome 49, lo scorrimento è diventato più fluido. Ma non è tutto: sono possibili altri potenziali miglioramenti tramite Houdini e proprietà CSS come smooth-scroll. Prova Chrome 49, facci sapere cosa ne pensi e, soprattutto, lascia che sia il browser a scorrere, se puoi.