[Intermédiaire] Scrollbars | html css
Enzo White
Enzo White
Région d'origine : Hoenn - Pacifiville
Âge : 23 ans
Niveau : 10
Jetons : 1220
Points d'Expériences : 181
Adulte Blogueur
Sujet: [Intermédiaire] Scrollbars | html css   Mar 4 Juin - 14:54


Scrollbars
Intermédiaire | HTML CSS

Et bonjour, bonsoir à tous et à toutes !
Dans ce nouveau numéro des "Tutos de Max", on va se pencher sur un élément relativement important d'un code. Tout du moins, ça fait partit des petits détails, des finitions, qui amènent un code de sympa à vraiment chouette.

Les scrollbars.

Disclaimer, ce tutoriel est destiné envers les personnes de goût qui utilisent Google Chrome et pas Mozilla Firefox et autres inépties. Déso pas déso. En vrai y'a une explication un petit peu plus sérieuse et c'est vaguement le but de mes tutos donc c'est partit !

Pourquoi pas sur Firefox and co ?
Tous les navigateurs ne sont pas égaux face aux avancées technologiques. Il existe plusieurs types de modules qui permettent aux navigateurs de gérer certaines propriétés css les plus avancées. La scrollbar en fait partie et seuls les navigateurs utilisant le "moteur" webkit peuvent les utiliser. Ca comprend Chrome, Safari et Opera.

Maintenant que ça c'est dit, passons au vif du sujet.

La scrollbar, qu'est ce que c'est ?

Ce tutoriel suppose que vous avez des connaissances de bases en css et html et sur la manière de l'utiliser sur les forums. Je m'attarderais pas sur les détails du coup !

Une scrollbar peut se diviser en deux. Le bout qui bouge et ceux sur quoi il bouge. Pour des raisons de lisibilité, on va utiliser les termes anglais (je connais pas les français rip) : Thumb pour le bout qui bouge et Track pour le fond. On peut aussi compter les flèches mais généralement on est bien content de les dégager parce qu'elles sont moches.

Donc, comment on va personaliser notre thumb et notre track ? Et bien Michel, c'est ce que je vais t'expliquer !

Personaliser une scrollbar

On va donc créer une classe qu'on va ici appeller scroll pour la simplicité et l'originalité. On va commencer par définir la scrollbar en elle-même avant d'ajouter, ou non des détails et des personalisations sur les différentes parties de la scrollbar.
Code:
.scroll::-webkit-scrollbar {width: 5px;height:4px;}
.scroll::-webkit-scrollbar-track {background-color: transparent;}
.scroll::-webkit-scrollbar-thumb {background-color: black;}

Qu'est ce que ça veut dire ? Plutôt simple, notre scrollbar est large de 5 px si elle est verticale et haute de 4 px si elle est horizontale. La track est transparence et le thumb est noir. Tout simplement.

Visuellement, ça ressemble à ça :


test test test test test test test test test test test test test test test test test test test test test test test test test test test test


C'est le moment ou vous me dites "Mais Max, j'ai fait tout pareil mais ça marche pas !!" et où, mon cher Michel, je te répond qu'il faut que tu instancies ta classe sur le bloc où tu veux que la scrollbar apparaisse.

Code:
<div class="scroll">mon texte à scroller</div>

Il est évident que votre div doit avoir été stylisée à l'avance pour avoir soit une hauteur max soit une largeur max et la commande de style qui lui indique comment gérer quand il y a plus de texte que de place. Vous la connaissez c'est :
Code:
overflow:auto;

Je m'attarde pas là dessus, je considère que si vous êtes ici, vous connaissez ça et que j'ai pas besoin de l'expliquer uwu.

Et du coup voilà, vous avez les bases ! Maintenant j'aimerais vous proposer quelques petites mises en style histoire de vous montrer rapidement ce qu'on peut faire !
Quelques exemples

test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:
.scroll2::-webkit-scrollbar {width: 9px;height:4px;}
.scroll2::-webkit-scrollbar-track {background-color: #f9ebee;}
.scroll2::-webkit-scrollbar-thumb {background-color:#cc526c; border-bottom:10px solid #d6768a; border-radius:30px;}
On expérimente avec les bordures et les couleurs !
test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:
.scroll3::-webkit-scrollbar {width: 5px;height:4px;}
.scroll3::-webkit-scrollbar-thumb {background-color:transparent; border:1px solid black;}
Simple et élégant avec simplement une petite barrière.
test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:
.scroll4::-webkit-scrollbar { width:7px;border:solid 3px #ccc;background-color:black; }
.scroll4::-webkit-scrollbar-thumb{background-color:#cc526c; }
Un peu plus complexe, avec une simple barre comme track. Attention, la largeur de la scrollbar doit être impaire ! La technique c'est d'englober votre scrollbar avec une bordure de la couleur de votre fond et de laisser un pixel à l'intérieur pour faire la barre !
test test test test test test test test test test test test test test test test test test test test test test test test test test test test

Code:
.scroll5::-webkit-scrollbar { width:7px;}
.scroll5::-webkit-scrollbar-thumb{border:solid 3px #ccc;background-color:black; }
La même chose, mais inversée !

N'hésitez pas à expérimenter, il y a de nombreuses possibilités avec ces scrollbars et c'est relativement simple à prendre en main !

Et voilà voilà ! Si vous avez des questions, je suis, comme toujours, à votre disposition !

_________________


traveller
[Intermédiaire] Scrollbars | html css
Page 1 sur 1
Permission de ce forum: Vous pouvez répondre aux sujets dans ce forum
Sauter vers:  
Outils de modération :