LionBars, une scrollbar jQuery légère et cross-browser

26 février 2012

LionBars est un plugin jQuery qui permet de mettre en place une scrollbar, légère et compatible multi-navigateurs, reproduisant le style des barres de défilement du système d’exploitation Mac OS X.

Principales caractéristiques

Particulièrement léger avec ses 8Ko, LionBars génère une scrollbar compatible avec Firefox, Chrome, Opera, IE8+ et Safari, aussi bien sur Windows que sur Mac. Le plugin copie à l’identique la scrollbar OS X. Le contenu de la fenêtre n’est pas redimensionné, la barre de défilement étant ajoutée par dessus avec une légère opacité. Le scroll est parfaitement géré et supporte les racourcis natifs du clavier tels que la barre d’espace et les touches directionnelles. Quelques options sont en cours de développement et arriveront d’ici peu.

Comment l’installer ?

On commence par télécharger le plugin LionBars et le framework jQuery, et les inclure dans notre fichier. Il est également nécessaire d’inclure la feuille de style lionbars.css fournie avec le plugin qui permet de générer le design de la scrollbar. Vous pouvez par exemple faire un @include ‘lionbars.css’ dans votre feuille de style principale (ce n’est pas le cas ici).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.lionbars.0.3.min.js"></script>
<link rel="stylesheet" href="lionbars.css" type="text/css" />

Puis il faut définir un id CSS pour identifier l’élément HTML qui va faire office de bloc avec scrollbar.

<div id="box">
// contenu
</div>

Et on termine avec l’appel du plugin jQuery sur l’élément HTML ciblé.

 $('#box').lionbars();

LionBars est un plugin jQuery récent. Par conséquent, il est toujours en cours de développement et herbergé sur GitHub. D’autres fonctionnalités vont être ajoutées prochainement comme des effets de lumière et d’ombre. N’hésitez donc pas à participer au projet en proposant des améliorations.

[EDIT] : Le site du plugin n’existe plus mais le script est toujours disponible sur GitHub à l’adresse suivante : https://github.com/allenwei/jquery-lionbars

Requis : jQuery
Compatibilité : Firefox, Chrome, Opera, IE8+, Safari
Démonstration : http://nikolaydyankov.com/lionbars/
Licence : libre

Commentaires