Nous contacter

  1. Accueil
  2. Blog
  3. Webdesign
  4. SimpleBar, un outil pour personnaliser vos barres de défilement

SimpleBar, un outil pour personnaliser vos barres de défilement

Le 18/10/2018

Dans Webdesign

Si nous devions 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 (nous donnons la palme à l'impossibilité de choisir comment est réparti le stroke en SVG, mais ce n'est pas le sujet d'aujourd'hui). Pour pallier à ça, nous vous faisons découvrir SimpleBar, un outil pour personnaliser vos barres de défilement.

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 pas forcément agréable pour tous les supports.

Pour éviter de passer un temps infini entre les tests, corrections pour suivre les changements de versions de navigateurs ou tout simplement la création du JS, nous avons toujours tendance à passer par des ressources pour cette tâche, mais on est jamais vraiment satisfait par ces dernières. Néammoins les deux plus intéressantes sont jQuery Scrollbar et malihu jQuery custom Scrollbar ayant leurs limites. Elles demandent jQuery comme prérequis.

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 sans dépendance à un framework JavaScript particulier.

Niveau usage, SimpleBar est de loin le plus simple de tout ceux que nous avons 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 aussi simple que ça.

<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 sur SimpleBar nous vous proposons de vous diriger directement vers la page Github du projet.