Xevia AccueilBlogActualitésA propos

Plus de scrollbars sous Chrome !

English version available

Google Chrome est surtout connu pour sa rapidité et son design ... mais niveau design, on peut reprocher l'abondance des scrollbars (barres de défilement) qui — c'est mon avis personnel — peuvent devenir envahissantes et casser totalement le design de la page que l'on est en train de visiter. Surtout quand le navigateur est en mode plein écran. Heureusement, il est possible de s'en débarrasser en appliquant des règles CSS spécifique à Chrome (ou WebKit plutôt). Voici la manoeuvre.

Ouvrir le fichier %LOCALAPPDATA%\Google\Chrome\User Data\Default\User Stylesheets\Custom.css

Insérer le code CSS ci-dessous

CSS
::-webkit-scrollbar {
height: 10px;
width: 10px;
background-color: #999999;
}
 
html > ::-webkit-scrollbar {
width: 0px;
}
 
::-webkit-scrollbar-thumb {
background: #999999;
}
 
::-webkit-scrollbar-track-piece {
background-color: #797979;
}

Cela devrait faire disparaître les barres de défilement verticales, et modifier le design des barres horizontales. Bien sûr vous pouvez changer le code CSS pour changer de couleurs ou de formes.

Scrollbarless BrowserVous avouerez que sans barres de défilement c'est quand même plus beau.

Custom Horizontal ScrollbarLa barre de défilement horizontale — qui apparaît rarement — est "customisée".

Il ne reste plus qu'à attendre que Google copie Apple et mette en place des scrollbars qui n'apparaissent que quand on scrolle et qui s'intègrent mieux à l'interface du navigateur ...

Edit (21/09/2011) : J'ai changé le code de manière à supprimer uniquement la barre de défilement verticale de la page. Les scrollbars devraient s'afficher correctement dans les autres conteneurs HTML, sauf dans les cadres. C'est particulièrement pratique quand on se sert de l'inspecteur d'éléments (Developer Tools) de Chrome. Leur design a aussi été modifié pour supprimer les arrondis.