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
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.
Lire →
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.