Ressources:
La barre de défilement est un élément d’UI propre à chaque OS et navigateur. L’aspect visible sur la maquette est celui d’un OS Mac et du navigateur Safari.
Tu peux faire un test en ouvrant la page suivante sous plusieurs navigateurs et en déroulant la 1ère liste de sélection: https://ng-select.github.io/ng-select#/data-sources
Changer l’aspect de cet élément se révèle faisable dans certains cas (pas tous!) et peut poser de gros soucis de performances suivant la solution choisie.
Je vois trois solutions:
- Solution reposant uniquement sur CSS: c’est la plus propre, la plus légère et elle ne devrait pas poser de problèmes de performances. C’est de loin la plus rapide à mettre en place et la plus fiable (enfin… sauf si tu choisis la solution 3).
Problème: ça fonctionnera seulement avec les dernières versions de Chrome et Safari (supports mobile et desktop) et pas avec Firefox, IE, Edge, etc… qui conserveront l’aspect natif. - Solution reposant sur javaScript: cela reviendrait à mettre en place du code sâle, lourd et à s’exposer à des problèmes de performances sans pour autant garantir que l’affichage sera parfait sur tous les navigateurs.
Il faut également ajouter que les scripts que j’ai vu fonctionnent avec le contenu qui s’affiche au 1er chargement de la page et pas forcément avec du contenu qui se régénère à la volée comme cela se produit dans une application Angular. - La solution que je préconise: accepter que chaque OS et navigateur puisse avoir une scrollbar différente et ne rien toucher.
En soi, la scrollbar de la maquette n’a pas fait l’objet d’une attention particulière en terme de design. Elle est ainsi parce que la maquette a été réalisée sous Mac.