Se c'è una cosa che le persone desiderano davvero dallo scorrimento, è che le operazioni siano fluide. In passato, Chrome ha avuto lo scorrimento fluido in alcuni luoghi, ad esempio quando gli utenti scorrono i contenuti con i trackpad o sfogliano una pagina su un dispositivo mobile. Ma se l'utente ha un mouse collegato, avrà uno scorrimento più mosso e inclinato, che è esteticamente meno piacevole. Tutto sta per cambiare in Chrome 49.
Per molti sviluppatori, la soluzione a questo comportamento di scorrimento nativo basato sull'input e graduale è stata l'uso delle librerie, il cui obiettivo è rimapparlo per renderlo più fluido e piacevole agli occhi. Gli utenti possono farlo anche tramite le estensioni. Tuttavia, sia le librerie che le estensioni hanno degli svantaggi che cambiano lo scorrimento, tuttavia:
- Un'inquietante atmosfera di valle. Questo si manifesta in due modi: in primo luogo, un sito può avere un comportamento di scorrimento fluido, mentre un altro no, quindi l'utente può finire per sentirsi disorientato dall'incoerenza. In secondo luogo, i principi della fisica della biblioteca non corrispondono necessariamente a quelli della piattaforma. Anche se il movimento può essere fluido, può apparire sbagliato o inquietante.
- Aumenta la propensione alla contesa dei thread principali e al jank. Come per qualsiasi altro codice JavaScript aggiunto alla pagina, il carico della CPU aumenterà. Questo non è necessariamente un disastro, a seconda di cos'altro sta facendo la pagina, ma se c'è un lavoro di lunga durata sul thread principale e lo scorrimento è stato accoppiato al thread principale, il risultato netto può essere stuttering e jank.
- Più manutenzione per gli sviluppatori, più codice da scaricare per gli utenti. Avere una libreria per scorrere senza problemi è qualcosa che deve essere sempre aggiornata e mantenuta, oltre a incrementare il peso complessivo delle pagine del sito.
Questi inconvenienti sono spesso riscontrati anche in molte raccolte che si occupano dei comportamenti di scorrimento, che si tratti di effetti parallasse o di altre animazioni combinate con lo scorrimento. Troppo spesso innescano jank, ostacolano l'accessibilità e in generale danneggiano l'esperienza utente. Lo scorrimento è un'interazione fondamentale del web e la sua modifica con le librerie deve essere eseguita con grande attenzione.
In Chrome 49, il comportamento di scorrimento predefinito cambierà Windows, Linux e ChromeOS. Il vecchio comportamento di scorrimento graduale non sarà più disponibile e lo scorrimento sarà fluido per impostazione predefinita. Non sono necessarie modifiche al codice, ad eccezione della possibilità di rimuovere eventuali librerie a scorrimento fluido se le hai utilizzate.
Altri prodotti per lo scorrimento
In questa opera sono inoltre presenti altri articoli legati ai pergamene che vale la pena menzionare. Molti di noi vogliono effetti accoppiati tramite scorrimento, come la parallasse, oppure lo scorrimento fluido fino al frammento di un documento (come example.com/#somesection). Come ho accennato in precedenza, gli approcci utilizzati oggi possono spesso essere dannosi sia per gli sviluppatori sia per gli utenti. Esistono due standard di piattaforma che potrebbero essere utili: i Worklet Compositor e la proprietà CSS scroll-behavior.
Houdini
I Compositor Worklet fanno parte di Houdini e devono essere ancora implementati in modo esaustivo e completo. Detto questo, quando le patch vengono rilasciate, ti permetteranno di scrivere codice JavaScript che viene eseguito come parte della pipeline del compositor, il che significa che in generale gli effetti accoppiati con scorrimento come la parallasse verranno mantenuti perfettamente sincronizzati con la posizione di scorrimento corrente. Dato il modo in cui lo scorrimento viene gestito oggi, in cui gli eventi di scorrimento vengono inviati solo periodicamente al thread principale (e possono essere bloccati da altre attività del thread principale), questo rappresenterebbe un enorme balzo in avanti. Se ti interessano Compositor Worklets o qualsiasi altra nuova entusiasmante funzionalità offerta da Houdini, dai un'occhiata al post Intro to Houdini di Surma, scopri le specifiche di Houdini e aggiungi le tue opinioni alla mailing list Houdini.
comportamento di scorrimento
Per quanto riguarda lo scorrimento basato su frammenti, la proprietà CSS scroll-behavior è un'altra cosa che potrebbe esserti d'aiuto. Se vuoi provarlo, avrai il piacere di sapere che è già stato spedito in Firefox e che puoi attivarlo in Chrome Canary usando il flag "Attiva le funzionalità sperimentali della piattaforma web". Se imposti, diciamo, l'elemento <body> su scroll-behavior: smooth, tutti gli scorrimenti attivati dalle modifiche dei frammenti o da window.scrollTo verranno animati senza intoppi. È molto meglio che dover usare e gestire il codice di una libreria che cerca di fare la stessa cosa. Con qualcosa di fondamentale come lo scorrimento, è davvero importante evitare di rompere le aspettative degli utenti, quindi anche se queste funzionalità cambiano, vale comunque la pena adottare un approccio di miglioramento progressivo e rimuovere tutte le librerie che tentano di aggregare questi comportamenti.
Vai avanti e scorri
A partire da Chrome 49, lo scorrimento sta diventando più fluido. Ma non è tutto: i potenziali miglioramenti potrebbero essere apportati tramite le proprietà Houdini e CSS come smooth-scroll. Prova Chrome 49, facci sapere cosa ne pensi e, soprattutto, consenti al browser di scorrere dove puoi.