Bonjour,

je me suis rendu compte en visitant ce portfolio : http://axel-aubert.fr/#accueil que la barre de scolls des navigateur était personnalisable. Je me suis un peu renseigner et apparemment sa se fait du Jquery. Sa serait intéressant je trouve de faire un tuto dessus pour le site surtout que je pense cela devrait bientôt devenir très utile (quel rêve de personnaliser le site plus loin de que le simple rectangle du navigateur :))

Au revoir

3 réponses


Grafikart
Réponse acceptée

C'est assez inconsistent d'avoir des scrollbar perso (sans parler des performances/compatibilité) perso j'essaie d'éviter ce genre de chose au maximum :)

Dommage :(

Pas besoin de JavaScript pour le faire, un coup de CSS et le tour est jouer !

Ce CSS marche uniquement pour Chrome et Opera (Webkit) :

::-webkit-scrollbar { /* Scrollbars */
    width: 12px;
    height: 12px;
    background-color: rgb(238, 238, 238);
}
::-webkit-scrollbar-track {
    background-color: #e6e6e6;
}
::-webkit-scrollbar-thumb { /* Barre */
    -webkit-box-shadow: inset 0 0 0 1px #06a7ea, inset 0 0 0 6px #06a7ea;
}
::-webkit-scrollbar-thumb:hover { /* Barre */
    -webkit-box-shadow: inset 0 0 0 1px rgb(79, 192, 240), inset 0 0 0 6px rgb(79, 192, 240);
}
::-webkit-scrollbar-thumb:horizontal { /* Barre du bas */
    border-right-width: 0;
    border-bottom-width: 4px;
    -webkit-border-top-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    -webkit-border-bottom-left-radius: 0px;
}
::-webkit-scrollbar-corner { /* Coin de la fenêtre */
    background-color: rgb(238, 238, 238);
}

Des articles qui pourront d'aider :
http://www.screenfeed.fr/blog/personnaliser-les-scrollbars-webkit-0366/
http://codemug.com/html/custom-scrollbars-using-css/