SimpleBar, pour personnaliser vos barres de défilement de manière simple et légère
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
Si je devais classer la liste des manques incompréhensibles de la spécification Web, la personnalisation en CSS de la barre de défilement serait très certainement dans le top 3 (je donne la palme à l'impossibilité de choisir comment est réparti le stroke en SVG, mais ce n'est pas le sujet d'aujourd'hui).
Personnaliser le scroll d'un bloc
Pourquoi en 2018 il est toujours impossible de personnaliser en CSS cette petite barre de manière homogène entre les navigateurs ? Mystère, mais le résultat est que c'est tout simplement impossible sans émuler le fonctionnement du scroll en Javascript et donc souvent fournir un comportement par forcément agréable pour tous les supports.
Pour éviter d'y passer un temps infini entre les tests, corrections pour suivre les changements de versions de navigateurs ou tout simplement la création du JS, j'ai toujours eu tendance à passer par des ressources pour cette tache, mais n'avais jamais vraiment été satisfait par ces dernières, les deux plus intéressantes (jQuery Scrollbar et malihu jQuery custom Scrollbar) ayant leurs limites ainsi que jQuery comme prérequis.
Puis j'ai découver la ressource que je veux vous partager aujourd'hui : SimpleBar
SimpleBar, pour personnaliser vos barres de défilement de manière simple et légère
SimpleBar est donc une ressource Javascript simple à utiliser et à personnaliser en CSS, légère, fonctionnant sur tout les navigateurs modernes et qui se paye même le luxe de ne pas avoir de dépendance à un framework javascript particulier.
Niveau usage, c'est de loin le plus simple de tout ceux que j'ai essayé : pour un usage basique, ajoutez simplement les fichiers CSS et JS à vos pages, puis ajoutez un attribut sata-scrollbar à votre élément. C'est tout.
<link rel="stylesheet" href="https://unpkg.com/simplebar@latest/dist/simplebar.css" />
<script src="https://unpkg.com/simplebar@latest/dist/simplebar.js"></script>
<div data-simplebar></div>
Pour une personnalisation plus poussée ou plus d'informations je vous propose de vous dirriger directement vers la page Github du projet. Bonne découverte !
By
