Custom Scrollbar, une scrollbar jQuery personnalisée avec CSS

Custom Scrollbar est un plugin jQuery qui permet de mettre en place une barre de défilement verticale ou horizontale, aussi appelée « scrollbar », entièrement personnalisable via CSS et compatible avec l’ensemble des navigateurs modernes.

Une scrollbar personnalisable

Le plugin est assez complet avec plus d’une quinzaine de paramètres. On retrouve le fonctionnement de base d’une scrollbar verticale ou horizontale avec la gestion du scroll molette de la souris (via Mouse Wheel) mais aussi l’imbrication de plusieurs barres de défilement au sein d’un même conteneur, la longueur de défilement, des fonctions de callback, ou encore du scroll avec effet d’inertie (easing)… Seul petit regret, l’absence de la navigation clavier via les touches directionnelles.

custom_scrollbar_jquery

Le point fort du plugin est qu’il entièrement customisable avec CSS, que ce soit la barre de fond, la barre de contrôle ou les flêches. Custom Scrollbar met notamment à disposition plusieurs thèmes prêts à l’emploi que vous pouvez bien sûr modifier à votre convenance. Vous retrouverez sur le projet GitHub plus d’une vingtaine de démonstrations pour gérer différentes fonctionnalités externes au plugin comme les ancres internes animées, l’inifite scroll, l’utilisation de jQuery UI, etc.

Comment l’utiliser ?

Commençons par télécharger l’archive contenant tous les fichiers du plugin pour les inclure dans notre document HTML. De préférence la feuille de style doit être placée dans la partie head et les fichiers JS placés avant la fermeture de la balise body.

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

Ensuite, il faut définir un id ou une classe CSS sur votre élément HTML qui va contenir la scrollbar. Bien entendu, votre contenu doit être suffisament long par rapport au conteneur pour qu’une barre de défilement apparaîsse. C’est donc à vous d’appliquer le style CSS nécessaire, par exemple en fixant sa hauteur.

<div class="content">
   <!-- contenu (texte, image, etc) -->
</div>

Puis on termine par l’appel jQuery sur le conteneur HTML.

(function($){
   $(window).load(function(){
      $(".content").mCustomScrollbar();
   });
})(jQuery);

Et c’est terminé, votre scrollbar personnalisée sera fonctionnelle ! À noter que le plugin fournit également la source PSD des flêches de navigation qui sont utilisées en sprite CSS. Vous pouvez donc ajouter vos propres icônes si vous le souhaitez. Un plugin simple et efficace pour réaliser une scrollbar custom et cross-browser.

Requis : jQuery
Compatibilité : Firefox 3.6+, Chrome 5+, Opera, Safari 4+, IE8+, iOS (5.x, 6.x), Android (2.x, 3.x, 4.x)
Démonstration : http://manos.malihu.gr/jquery-custom-content-scroller/
Licence : GNU LGPL

Commentaires

  • Anon

    Je l’ai utilisé dans plusieurs projets et franchement après en avoir essayé plusieurs je trouve qu’il dépasse de très très loin les concurrents.

  • Alain

    Maintenant qu’il intègre la compatibilité sur mobile c’est effectivement une bonne alternative aux scrollbars natives!

  • J. B.

    Je comprends pas où je dois aller modifier les CSS comme j’aimerais, dans quel fichier ça doit se faire ? Rien ne change après que j’ai suivi ces étapes

    • Le CSS est éditable dans le fichier jquery.mCustomScrollbar.css.

  • Kamel38

    Possible de l’utiliser pour changer la barre de défilement de la page entière ? (et non d’un seul élément)

    • Peut-être en utilisant body comme sélecteur. À tester.

  • Adrien

    Il y à certain cas dans lesquels le script bug..

  • BobBobson

    Bonjour, j’ai suivis les instructions à la lettre et pourtant cela ne fonctionne pas! Quelqu’un aurait une idée?

  • Hmz Ch

    il y’a un guillemet de trop ici :

    <script src="jquery-1.9.1.min.js""></script>
    • C’est corrigé, merci.

  • Attention : pour l’utiliser sur la barre de scroll de la page entière, pensez bien à définir html,body{height:100%;} sinon ça ne fonctionne pas.

  • Irving

    Merci pour ce plugin ! J’en reviens pas de la simplicité d’utilisation !

  • Seb

    Ne fonctionne pas sur Safari 5.1.7 pour windows et Safari 5.1.10 pour Mac Os X!