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

26 février 2012
8 949 vues

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

  • Welcominh

    C’est pas mal comme plugin. Inutile, donc indisp…inutile ^^. Plus sérieusement, l’idée est intéressante et ne sert exclusivement que pour taper l’oeil (question ergonomie ca ne change rien si je comprends bien), il faudrait voir si beaucoup de développeurs seraient prêts à l’adopter.
    Pour ma part : comment alourdir (bien que légèrement) davantage son site pour du design paillette.

    • http://www.megaptery.com/ Pierrinho

      « Paillette » peut-être… mais j’insiste sur le fait que le plugin gère les scrolls natifs ! ;-)

  • ThierryOdet

    Plugin sympa :)
    dommage, ne marche pas sur IE8 sinon j’aurais été tenté de l’intégrer dans des prods.

    • http://www.megaptery.com/ Pierrinho

      Effectivement, il ne fonctionne pas encore sur IE8, mais cela ne devrait pas tarder d’après les auteurs du plugin. Merci pour cette précision.

  • http://twitter.com/Virtuousquare Sébastien Plaignaud

    Intéressant, mais si le seul intérêt de changer l’apparence de la scrollbar, peut-être vaut-il mieux se contenter d’attendre le CSS3 ( http://css-tricks.com/custom-scrollbars-in-webkit/ ) et cross browser se limitant à IE8 (plus ou moins) c’est limité malheureusement.
    Je m’étais essayé il y a un bon moment à un plugin similaire, mais j’y avais ajouté la possibilité d’ajouter des ancres avec tooltip, ce qui la rendait un peu plus ludique et utile : http://virtuousquare.com/folio/index.html
    Il y avait pas mal d’options gérables (visible en haut du script : http://virtuousquare.com/folio/js/smart-scroll-plugin.js ) et il fonctionne dans IE8 ;)
    Par contre il utilise jQueryUi, donc assez gourmand!! :p

    Moralité, vivement CSS3!

    • http://www.megaptery.com/ Pierrinho

      Hello Sébastien,
      Je vois que tes créations jQuery/CSS3 sont toujours aussi impressionnantes, bravo !

  • Visiteur

    Cette scrollbar est bof bof … ok, le design est présent mais des attributs HTML non W3C sont positionné, des DIV sont créer entre le UL et le LI si la lionbars est positionnée sur le UL, et puis impossible de redimensionner la zone scrollable une fois que le script .lionbars() a été appelé … par difficile de faire mieux, selon moi …