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

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.

4 commentaires:

  1. Bonjour,

    Le fichier jquery.mCustomScrollbar.css n'est pas dans le Zip

    Ce plug-in ne fonctionne pas avec Firefox (21.0 sous MAC OS Lion)
    Il suffit d'afficher votre exemple jsFiddle pour le constater.

    Cordialement

    Jean-Pierre

    RépondreSupprimer
    Réponses
    1. Bonjour,

      merci pour la remarque, j'ai corrigé l'exemple dans jsFiddle, les liens n'étaient plus bons.

      Voici les fichiers utiles :
      https://docs.google.com/file/d/0BzRNd4NxyXoiNDVwTXVHTUJFdkk/edit

      Supprimer
  2. Pouvons nous l'adapter a de l'html 5 en lui adaptant une section ! ou lui d'une div ?

    RépondreSupprimer
    Réponses
    1. Cela devrait fonctionner oui.
      En remplaçant $("#intro") par $("section"), toutes les sections devraient posséder la scrollbar.
      Mais un identifiant reste utile si on souhaite insérer la barre à un seul endroit!

      Supprimer