S'il y a une chose qui plaît vraiment au défilement, c'est qu'il doit être fluide. Auparavant, Chrome permettait un défilement fluide à certains endroits, par exemple, lorsque les utilisateurs faisaient défiler l'écran avec leur pavé tactile ou balayaient une page sur un mobile. Mais si l'utilisateur a une souris branchée, il obtiendrait un comportement de défilement « en escalier » plus instable, ce qui est beaucoup moins esthétique. Tout cela va changer dans Chrome 49.
Pour de nombreux développeurs, la solution au comportement de défilement natif en escalier basé sur les entrées a été d'utiliser des bibliothèques. L'objectif était de le remapper pour le rendre plus fluide et plus agréable à l'œil. Les utilisateurs le font également grâce aux extensions. Toutefois, il existe des inconvénients pour les bibliothèques et les extensions qui modifient le défilement:
- Une étrange sensation de vallée. Cela se manifeste de deux manières: tout d'abord, un site peut présenter un défilement fluide, mais pas un autre, ce qui peut désorienter l'utilisateur par l'incohérence. Deuxièmement, la fluidité physique des fonctions de la bibliothèque ne correspondra pas nécessairement à celle de la plate-forme. Ainsi, même si le mouvement est fluide, cela peut sembler inadéquat ou étrange.
- Propension accrue aux conflits et aux à-coups du thread principal. Comme pour tout code JavaScript ajouté à une page, la charge du processeur augmente. Ce n'est pas nécessairement un désastre, selon ce que fait la page, mais si une tâche de longue durée est effectuée sur le thread principal et que le défilement a été couplé au thread principal, le résultat net peut être des défilements saccadés et des à-coups.
- Plus de maintenance pour les développeurs et plus de code à télécharger par les utilisateurs. Disposer d'une bibliothèque permettant un défilement fluide doit être maintenu à jour et géré, ce qui augmentera le poids global de la page du site.
Ces inconvénients sont souvent également vrais pour de nombreuses bibliothèques qui gèrent les comportements de défilement, qu'il s'agisse d'effets de parallaxe ou d'autres animations couplées au défilement. Trop souvent, ils déclenchent des à-coups, entravent l'accessibilité et nuisent généralement à l'expérience utilisateur. Le défilement est une interaction essentielle avec le Web, et toute modification apportée aux bibliothèques doit être faite avec le plus grand soin.
Dans Chrome 49, le comportement de défilement par défaut sera modifié sur Windows, Linux et ChromeOS. L'ancien comportement de défilement échelonné va disparaître et le défilement sera fluide par défaut. Aucune modification de votre code n'est nécessaire, sauf peut-être en supprimant les bibliothèques à défilement fluide si vous les avez utilisées.
Plus de goodies de défilement
Il existe d'autres goodies liés au défilement qui méritent également d'être mentionnés. Nous sommes nombreux à vouloir des effets couplés au défilement, comme la parallaxe et le défilement fluide vers un fragment de document (comme example.com/#somesection). Comme indiqué précédemment, les approches utilisées aujourd'hui peuvent souvent être préjudiciables aux développeurs et aux utilisateurs. Deux normes de plate-forme sont en cours de développement et pourraient vous être utiles: les Worklets du compositeur et la propriété CSS scroll-behavior.
Houdini
Les Worklets compositeurs font partie de Houdini, mais leur spécification et leur implémentation n'ont pas encore commencé. Cela dit, lors de l'arrivée des correctifs, ils vous permettront d'écrire du code JavaScript exécuté dans le pipeline du compositeur, ce qui signifie, en général, que les effets couplés au défilement, comme le parallaxe, seront parfaitement synchronisés avec la position de défilement actuelle. Étant donné la façon dont le défilement est actuellement géré, où les événements de défilement ne sont envoyés que périodiquement au thread principal (et peuvent être bloqués par d'autres tâches de thread principal), cela représenterait un énorme bond en avant. Si vous êtes intéressé par les Worklets compositeurs ou les nouvelles fonctionnalités intéressantes proposées par Houdini, lisez l'article d'introduction de Houdini par Surma et les spécifications d'Houdini, et donnez votre avis sur la liste de diffusion Houdini !
comportement de défilement
Pour le défilement basé sur des fragments, vous pouvez également utiliser la propriété CSS scroll-behavior. Si vous souhaitez essayer cette fonctionnalité, sachez qu'elle a déjà été expédiée dans Firefox. Vous pouvez l'activer dans Chrome Canary à l'aide de l'indicateur Activer les fonctionnalités expérimentales de la plate-forme Web. Si vous définissez l'élément <body> sur scroll-behavior: smooth, tous les défilements déclenchés par des modifications de fragment ou par window.scrollTo seront animés de manière fluide. C'est bien mieux que d'utiliser et de gérer le code d'une bibliothèque qui tente de faire la même chose. Avec quelque chose d'aussi fondamental que le défilement, il est vraiment important de ne pas bousculer les attentes des utilisateurs. Par conséquent, même si ces fonctionnalités sont en cours de migration, il est toujours utile d'adopter une approche d'amélioration progressive et de supprimer toutes les bibliothèques qui tentent d'émuler ces comportements.
Aller vers l'avant et faire défiler
Depuis Chrome 49, le défilement est plus fluide. Mais ce n'est pas tout: d'autres améliorations potentielles pourraient se voir grâce à Houdini et aux propriétés CSS comme smooth-scroll. Essayez Chrome 49, donnez-nous votre avis et, surtout, laissez le navigateur faire le défilement quand vous le pouvez !