• Modifier la scrollbar

    Voici mes codes pour modifier la scrollbar. Pour ceux qui ne savent pas, la scrollbar est "l'ascenseur" sur le côté de la page vous permettant de descendre.
    Modifier la scrollbar

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :
    Installer une police et l'utiliser

     

              T A I L L E          
     Vous pouvez premièrement changer la taille de la barre pour slider.
     

     ::-webkit-scrollbar {
        width: NOMBREpx; }

    width  : la largeur de la scrollbar. Plus vous mettrez une valeur élevée, plus la scrollbar sera épaisse (large).

     

              C O U L E U R          
    Voici déjà une petite légende pour ne pas que vous soyez perdus entre le fond et la barre de slide :
    Modifier la scrollbar

    Ce premier code est pour modifier le fond de la scrollbar.

     ::-webkit-scrollbar-track {
        background-color: #COULEUR;}

     
    Ce code est pour modifier la barre de slide :

     ::-webkit-scrollbar-thumb {
        background-color: #COULEUR;}

    background-color  : la couleur comme vous aurez pu le constater. Après le #, il faut mettre un code héxadécimal (vous pouvez le trouver dans le Color Picker Pro, dans le menu).
    COULEUR  : champ à remplir en fonction de ce qui est marqué.

     

    « Positions et opacités de la menubarMasquer les "infos articles" »

  • Commentaires

    1
    Mardi 1er Août à 10:22

    Coucou Lila,

    Encore merci pour ce code mais j'aimerai savoir comment arrondir la scrollbar car j'ai vu sur plusieurs blogs qu'elle était arrondi.

    Merci!

    2
    Mercredi 13 Septembre à 11:31

    Bonjour,

    Je pense avoir bien prit le code, mais pourtant rien ne se passe, la couleur de la barre ne change pas.

    C'est normal ? Qu'est ce qui ne va pas ?

    3
    Mercredi 13 Septembre à 13:52

    Tu es sur quel navigateur ?

    4
    Mercredi 13 Septembre à 20:18

    GEGEL CHROME

    5
    Mercredi 13 Septembre à 21:27

    Mdrrr Ah, dans ce cas là, ce n'est pas normal.
    Essaye ce code (ensuite, tu pourras changer les couleurs hein, c'est juste pour voir si ça marche) :
    ::-webkit-scrollbar {
        width: 7px;
        height: 20px;
    }

    ::-webkit-scrollbar-track {
        background-color: #fff;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #000;
    }

    6
    Mercredi 13 Septembre à 21:43

    Et bien là merci, parce que ça marche parfaitement !

    7
    Jeudi 14 Septembre à 16:43

    Pas de quoi !

    Si tu rencontres d'autres problèmes, n'hésite pas à me demander x)

    8
    Jeudi 12 Octobre à 16:51

    Merci ! Je cherchais ce code depuis un moment mais je ne le trouvais jamais...

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :