Personnaliser vos scrollbars

Si comme moi, vous trouvez les barres de défilement par défaut (scrollbar) des navigateurs moches, ce post est pour vous !

Je vous propose ici un plugin javascript qui permet de personnaliser vos scrollbars de façon très simple. jQuery custom content scroller, dont vous trouverez toutes les informations utiles ici.

Voici le résultat (à gauche la barre classique, à droite une scrollbar personnalisée) :



Avant de commencer, nous avons besoin de

• la librairie jQuery
• le plugin mCustomScrollbar

1. Importer les librairies

Dans le zip que vous récupérez, 2 fichiers sont utiles : jquery.mCustomScrollbar.concat.min.js et jquery.mCustomScrollbar.css

<script src="./jquery-2.0.0.min.js"></script>
<script src="./jquery.mCustomScrollbar.concat.min.js"></script>
<link href="./jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

2. Parties HTML et JS

<div id="intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit....
</div>

$(function () {

  $("#intro").mCustomScrollbar({ // on choisit la div "intro"
    verticalScroll:true, // barre verticale
    theme:"dark-thick", // thème pour la barre, personnalisable
    set_height:"500px", // on fixe la hauteur à 500 pixels
    set_width:"400px", // et la largeur à 400 pixels
    scrollButtons:{
      enable: true // on choisit d'afficher les flèches haut et bas
    }
  });

});

Et voilà ! Rien de plus à faire :)

Vous pouvez davantage personnaliser votre barre avec les options proposées, comme le thème de la scrollbar (vous trouverez les thèmes ici, il suffit ensuite de changer la variable theme dans le code JS).

Retrouvez l'exemple sur jsFiddle.

Lire →