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
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.
Bonjour,
RépondreSupprimerLe 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
Bonjour,
Supprimermerci 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
Pouvons nous l'adapter a de l'html 5 en lui adaptant une section ! ou lui d'une div ?
RépondreSupprimerCela devrait fonctionner oui.
SupprimerEn 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!