GoogleWatchBlog

Platzsparende Scrolleisten für Chrome

» Web-Version «

Gerade auf Netbooks ist Platz wichtig und da sind die 15-17 Pixel für die Scrollleiste auf Webseiten eigentlich verschwendeter Platz. Abhilfe für Google Chrome schaffen einige Erweiterungen, aber es muss nicht immer Erweiterung sein.

Mit dem Anpassen einer Datei, die auch Updates „überleben“ sollte, kann man sich zusätzlichen Platz für die Webseite holen. Auf Windows 7 ist die vertikale Scrollbar 17 Pixel breit. Auf Ubuntu bspw. 15. Mit der Anpassung ist die Scrollbar nur noch 3 Pixel breit und kann zudem noch an das verwendete Design angepasst werden.

Dazu öffnet man die Datei Custom.css in C:\Users\Benutzername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets (Windows 7 und Vista) mit einem Texteditor. Am besten verwendet man hierfür aber nicht den Texteditor von Windows sondern nutzt Notepad ++.

In diese Daten fügt man diesen CSS-Code ein:

#body{}
::-webkit-scrollbar
{
width: 3px;
height: 3px;
}
::-webkit-scrollbar-track-piece
{
background-color: #ffffff;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:vertical
{
height: 5px;
background-color: #666;
-webkit-border-radius: 3px;
}
::-webkit-scrollbar-thumb:horizontal
{
width: 5px;
background-color: #666;
-webkit-border-radius: 3px;
}

Jetzt die Datei speichern und Chrome neustarten. Nun sollte die Scrollbars ungefähr so ausschauen:

(zur Verdeutlichung orange eingerahmt)

Wem das Grau nicht gefällt, braucht nur den Wert #666; zu ändern. Logischerweise lässt sich das auch noch etwas mehr anpassen. So kann man auch einen Abstand zum Bildschirmrand einfügen und die Leiste breiter geschalten.

Auf Ubuntu findet man die Datei in ~/.config/google-chrome/Default/User StyleSheets.

Wem das Ganze zu komplex ist, kann auch auf eine Erweiterung zurückgreifen.

Übrigens kann man als Webmaster ebenfalls die Scrollbars per CSS anpassen. Derzeit kann dies aber nur Webkit. Wie das aussehen kann, zeigt zum Beispiel Sergej Müller auf seinem Blog.

[via]


Keine Google-News mehr verpassen:
GoogleWatchBlog bei Google News abonnieren | Jetzt den GoogleWatchBlog-Newsletter abonnieren