Digitale Welt | Dienstag, 20. September 2011

Schmale Scrollbalken in Safari

Wer – wie ich – die Aqua-Scrollbalken in Safari als viel zu auffällig und dadurch als störend empfindet, kann das durch ein einfaches Safari-Style-Sheet für alle Websites ändern. So sieht es aus:

Vorher:

screenshot

Nachher:

screenshot

Und so geht’s:

Kopieren Sie folgendes Style-Sheet in eine Textdatei und speichern Sie diese z. B. als Safari.css auf Ihre Festplatte:

body   {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	overflow-y: scroll;
	overflow-x: hidden;
}
html {
	overflow-y: auto;
	overflow-x: hidden;
}
::-webkit-scrollbar {
	width: 3px;
	height: 0px;
	background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical {
	height: 10px;
	background-color: #666;
}

Öffnen Sie die Safari-Einstellungen (Tastaturkürzel: ⌘;) und klicken Sie auf den Tab Erweitert. Im Popup-Menü Style-Sheet wählen Sie das eben gespeicherte Style-Sheet aus – und fortan sehen Sie auf allen Websites (und natürlich in allen Eingabefeldern, scrollbaren DIVs etc.) nur noch die unauffällig-eleganten schmalen Scrollbalken.

Kommentare:

Bei den Kommentaren handelt es sich um fremde Inhalte, die sich „esse est percipi“ nicht zueigen macht. Verantwortlich für den Inhalt eines Kommentars ist der jeweilige Verfasser.

Martin Dienstag, 20. September 2011, 15:14 Uhr

Oder einfach Lion installieren… ;-)

Michael Preidel Dienstag, 20. September 2011, 15:58 Uhr

Ich muss ja gestehen, dass mich an Lion so gut wie gar nichts reizt. Lion ist übrigens das erste Mac OS-Update seit System 6, das ich nicht innerhalb von 24 Stunden nach Veröffentlichung installiert habe ;-)

Klaus Dienstag, 20. September 2011, 20:21 Uhr

Den Tipp wollte ich gerade ausprobieren, Safari ist mein Zweit-Browser … bei mir sind die Balken schon schmal!? Wie kommt’s?
Habe Safari 5.1 und den Schneeleoparden 10.6.8.

Michael Preidel Mittwoch, 21. September 2011, 07:56 Uhr

@Klaus: Aha, das wusste ich nicht. Ich habe noch Safari 5.05, weil 5.1 mit seinen Multi Process Windows zu viel RAM und Systemleistung verbraucht.

Georg Mittwoch, 21. September 2011, 20:17 Uhr

Habe ich gerade ausprobiert, aber dann funktionieren einige Webseiten nicht mehr richtig. Zum Beispiel fehlt der Hintergrund.
Ich benutze es so:
::-webkit-scrollbar { width: 4px; height: 0px; background-color: #aaa; margin-right:1px; } ::-webkit-scrollbar-thumb:vertical { height: 10px; background-color: #666; margin-right:1px; }
Vielen Dank für den Tip.
(mein Safari 5.1, 10.6.8, zeigt klassische Scroller)

Klaus Mittwoch, 21. September 2011, 22:13 Uhr

@Michael @Georg: Als ich den Safari heute öffnete, hatte er wieder die klassischen Scrollbalken!
Jetzt habe ich ihn die Schmalen spendiert und die Style-Sheet-Option der Einstellungen zum ersten Mal benutzt, bzw. überhaupt beachtet. Verstehe wer will …
Jedenfalls Danke für den Tipp.

Michael Preidel Donnerstag, 22. September 2011, 07:25 Uhr

@Georg: Stimmt, bei einigen Seiten gibt’s Probleme. Das größte Problem auf meiner eigenen (dieser) Seite ist die Tatsache, dass das Scroll-Event nicht mehr empfangen wird. Deshalb erscheint der Nach-Oben-Pfeil rechts nicht mehr, wenn man herunterscrollt. Scheint ein Bug in Safari zu sein.

Ulf Donnerstag, 29. September 2011, 19:44 Uhr

Leider hat Chrome mit den Einstellungen Probleme. Dein Header ist nicht mehr „fixed“, trotz der „Position: absolut“. Ebenfalls wird die Schrift nicht korrekt dargestellt.
In Firefox stimmt, bis auf die Scrollbalken, die er nicht ändern kann, alles.

Achso, falles es interessiert, ich nutze Win7. Ob der gleiche Fehler bei Mac OS nachvollzogen werden kann, weiß ich nicht…