Les scrollbars
Combien de fois t'es-tu battu contre la scrollbar ? Les manières de la modifier ne te viennent pas à l'esprit et tu as du mal à trouver comment colorer ces petites barres pour faire plus esthétique dans tes fiches, pas de panique, je vais t'expliquer comment faire !
Attention, les scrollbars modifiés ne seront que visibles dans Google Chrome et pas dans Mozilla Firefox ou internet explorer. néanmoins il existe un moyen de les faire apparaitre sur tout types de navigateurs grâce à un code javascript que je ne connais pas. Si vous êtes sous firefox ou IE les scrollbars modifiés de ce tutoriel ne vous seront pas visibles (et je m'en excuse).
Si vous avez la moindre question n'hésitez pas.
01. Qu'est-ce que la scrollbar ?
La scrollbar, ou barre de déplacement ou bien encore ascenseur, est la petite barre qui se trouve sur le côté droit (ou gauche mais c'est plus rare) de vos pages web et autres. La scrollbar apparait généralement lorsque le contenu de votre case est plus grand que votre écran (ou que la case qui contient l'autre case).
En voici un exemple :
Je suis un texte et je suis beaucoup trop grand pour entrer entièrement dans une case, c'est pourquoi on a ajouté un "overflow:auto" dans le style afin que je puisse rentrer en entier sans rien déformer. Comme ça on peut écrire autant que l'on veut et cela restera joli visuellement parlant. Là je comble un peu pour vous montrer comment est l'overflow.
Voilà, la scrollbar c'est ce qui vous permet de lire l'intégralité de la case en la faisant glisser vers le bas.
Pour les petits curieux, voici le code de ma petite case ci dessus :
- Code:
-
<div style="width: 150px; height: 130px; background: #fff; border:3px solid #D0CD98; outline: 5px solid #BFC297; padding: 8px; font-size: 12px; font-family: calibri; margin: 0 auto; overflow: auto;">Je suis un texte et je suis beaucoup trop grand pour entrer entièrement dans une case, c'est pourquoi on a ajouté un "overflow:auto" dans le style afin que je puisse rentrer en entier sans rien déformer. Comme ça on peut écrire autant que l'on veut et cela restera joli visuellement parlant. Là je comble un peu pour vous montrer comment est l'overflow.</div>
02. Comment la modifier ?
Après cette rapide
ou pas introduction on passe maintenant dans le vif du sujet : comment on modifie cette petite barre ? Tout se passe dans le css !
Voici un exemple de ce que l'on peut faire en modifiant la scrollbar :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus, ipsum vitae dictum tincidunt, tellus leo porttitor mi, nec elementum dui velit ac enim. Maecenas vitae nulla ac metus posuere tincidunt ut quis est. In diam justo, consectetur volutpat aliquam posuere, consequat vel justo. Morbi et dapibus purus. Aenean vitae finibus arcu, et maximus magna. Nunc pretium tortor vestibulum lectus aliquam, a scelerisque justo pulvinar. Donec tincidunt urna nisl, ut efficitur purus porta vitae. Duis quis libero orci. Integer placerat iaculis dolor at condimentum. Suspendisse porttitor nisi at porta aliquam. Etiam ut egestas magna, non dignissim nulla.
On se retrouve ici avec une scrollbar de couleur #BFC297 sur un fon en #413537. Elle est différente de la scrollbar du premier exemple. Mais à quoi ressemble le code ?
- Le CSS:
- Code:
-
#tuto { width: 150px; height: 150px; background: #eee; padding: 5px; border: 10px solid #EF945F; font-size: 11px; text-align: justify; overflow-y: auto; margin: 0 auto } #tuto::-webkit-scrollbar { width: 7px; height: 7px; border: none; background: #413537 } #tuto::-webkit-scrollbar-thumb { width: 7px; border: none; background: #BFC297 } #tuto::-webkit-scrollbar-button { display: none }
Comme vous pouvez le voir dans le css, on retrouve une variable : "-webkit-scrollbar" c'est à partir de celle ci que l'on modifie les couleurs et autres afin de faire ce que l'on a envie avec.
Pour les curieux, voici le code html associé au code css ci dessus :
- html:
- Code:
-
<div id="tuto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam luctus, ipsum vitae dictum tincidunt, tellus leo porttitor mi, nec elementum dui velit ac enim. Maecenas vitae nulla ac metus posuere tincidunt ut quis est. In diam justo, consectetur volutpat aliquam posuere, consequat vel justo. Morbi et dapibus purus. Aenean vitae finibus arcu, et maximus magna. Nunc pretium tortor vestibulum lectus aliquam, a scelerisque justo pulvinar. Donec tincidunt urna nisl, ut efficitur purus porta vitae. Duis quis libero orci. Integer placerat iaculis dolor at condimentum. Suspendisse porttitor nisi at porta aliquam. Etiam ut egestas magna, non dignissim nulla.</div>
03. Les éléments
Voici une petite liste des éléments modifiables:
::-webkit-scrollbar:
::-webkit-scrollbar-button:
::-webkit-scrollbar-track:
::-webkit-scrollbar-track-piece:
::-webkit-scrollbar-thumb:
::-webkit-scrollbar-corner:
04. Cadeau
Je vous offre le code css à insérer dans votre feuille de style qui vous permettra de changer les scrollbars comme sur certaines forums.
Je l'ai détaillé afin que vous puissiez le modifier par vous même par la suite.
- Code:
-
/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
width: 5px; /*largeur de la scrollbar verticale*/
height: 5px; /*hauteur de la scrollbar horizontale*/
background-color: #000000;}
::-webkit-scrollbar-track {
background-color: #21211F; /*couleur du fond de la scrollbar*/}
::-webkit-scrollbar-thumb { /*la petite bande qui monte/descend*/
background-color: #45536E /*couleur de l'ascenseur*/;}
Tutoriel par Nemalus, ne pas redistribuer.
S'enregistrer 
