scrollbar.css - so geht es einfach
Themenseiten
Wenn ich eine Seite mit farblichem Hintergrund erstelle, möchte ich gerne auch die Scrollbar anpassen. In meinem Fall, wenn ich einen schwarzen Hintergrund verwende, stört mich eine helle Scrollbar. Nun habe ich einige Versuche gemacht und dabei ist diese CSS-Datei entstanden. Voraussetzung ist ein aktueller Browser wie z.B. Mozilla Firefox, Google Chrome, Microsoft Edge oder Safari. Leider klappt es nicht so wie gewünscht mit dem Opera- oder dem Safari-Browser. Im Firefox, der mein Favorit ist, habe ich es nicht geschafft, den "Thumb" (Scrollbalken in der Scrollbar) abzurunden, oder in der Breite in Pixeln zu beeinflussen...
c Bitte Beachten: Das Aussehen kann sich auch schnell wieder ändern, da die Entwickler aller Browser ständig neue Features entwickeln!
Der scrollbar-Generator
Achten Sie beim Anpassen von Bildlaufleisten darauf, dass der Schieberegler (Scrollbar Thumb) und die Spur (Scrollbar Track) ausreichend Kontrast zum umgebenden Hintergrund bieten. Stellen Sie außerdem sicher, dass der Bildlaufleisten-Trefferbereich für Benutzer mit Touch-Eingabe groß, bzw. breit genug ist.
Mein Generator erzeugt den passenden CSS-Code und daraus eine individuelle CSS-Datei (scrollbar.css) für Scrollbars (Farben, Breite, Buttonfarben) zum herunterladen.
Eine Vorschau der Scrollbar mit den gewählten Einstellungen wird nach dem Klick auf den Button "CSS generieren & Vorschau" so angezeigt wie es im jeweiligen Browser möglich ist.Der Generator ist ideal für moderne Webseiten, die auf aktuelle Browser abzielen. Für maximale Kompatibilität sollte das CSS immer mit den eigenen Zielbrowsern getestet werden.
Sie müssen, um die CSS-Datei in Ihrer Seite einzubinden, im <head>-Bereich (zwischen <head> und </head>) eine Zeile Code hinzufügen. Diese Codezeile können Sie sich weiter unten kopieren. Sie müssen nur den Pfad zu der generierten CSS-Datei anpassen.
Browser-Kompatibilität des generierten Codes:
Google Chrome, Microsoft Edge, Safari:
Unterstützen die CSS-Selektoren ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track, ::-webkit-scrollbar-button usw.
→ Alle Farbanpassungen und die Breite funktionieren wie im Generator eingestellt.
Mozilla Firefox:
Unterstützt die Eigenschaften scrollbar-width und scrollbar-color für das Grunddesign (Breite und Farben von Track & Thumb).
→ Feinere Anpassungen wie Button-Farbe, Border-Radius oder spezielle Webkit-Selektoren funktionieren NICHT, da Firefox kein Webkit verwendet.
Internet Explorer:
Wird nicht unterstützt. Die modernen Scrollbar-Selektoren funktionieren dort nicht.
Details zum scrollbar.css
Der generierte CSS-Code funktioniert nicht vollständig in Safari (macOS/iOS) und auf Android-Browsern. Er funktioniert am besten in Firefox und Chromium-basierten Browsern (Chrome, Edge, Opera).
1. Safari (macOS und iOS)
Safari unterstützt keine ::-webkit-scrollbar-Pseudo-Elemente mehr ab Version 13 (macOS Catalina, iOS 13).
Auch scrollbar-color und scrollbar-width werden nicht unterstützt.
Das bedeutet: Individuelle Scrollbar-Farben und -Stile funktionieren in Safari nicht. Die Scrollbar bleibt systemstandard.
2. Android-Browser
Chrome für Android:
Unterstützt nicht ::-webkit-scrollbar (nur Desktop-Chrome).
Scrollbars sind auf Android (und iOS) systemgesteuert und können per CSS nicht angepasst werden.
Firefox für Android:
scrollbar-color und scrollbar-width werden teilweise unterstützt (ab Firefox 79).
Aber keine Unterstützung für ::-webkit-scrollbar.
3. iOS (Safari, Chrome, Firefox)
Alle iOS-Browser nutzen die WebKit-Engine von Apple.
Keine Unterstützung für Scrollbar-Customizing via CSS.
Fazit
Es funktioniert mit:
Desktop-Chrome, Edge, Opera (::-webkit-scrollbar)
Desktop-Firefox (scrollbar-color, scrollbar-width)
Es funktioniert NICHT mit:
Safari (macOS/iOS)
Alle mobilen Browser (Android/iOS)
Hinweis:
Die Anpassung der Scrollbar funktioniert nur in modernen Desktop-Browsern wie Chrome, Edge, Opera und Firefox.
In Safari und auf Mobilgeräten (Android/iOS) werden Scrollbars weiterhin im Standard-Design des Systems angezeigt.
Nach der Anpassung der gewünschten Farben, muss die CSS-Datei auf den Server geladen werden.
Nun muss für die entspechende Seite noch eine Zeile Code eingefügt werden, damit die CSS-Datei geladen wird:
<link rel="stylesheet" type="text/css" href="scrollbar.css" media="screen" />
Haben Sie die CSS-Datei in einem Ordner abgelegt, passen Sie den Pfad entsprechend im Code an. Sie können auch die komplette URL eingeben:
<link rel="stylesheet" type="text/css" href="https://www.ihr-domainname.de/ihr-ordnername/scrollbar.css" media="screen" />
Diesen Code fügen Sie am besten wie folgt ein:
Klicken Sie in Ihrer websiteX5-Version auf "Sitemap" und aktivieren die gewünschte Seite durch einmaliges Anklicken. Dann wählen Sie oben im Hauptmenü die Option "Eigenschaften" und klicken anschließend im Untermenü auf "Erweitert" (siehe folgende Abbildung). Hier wählen Sie im Listenfeld die Option "nach dem <head>-Tag". Hier fügen Sie die Code-Zeile ein. Nun sollte alles einwandfrei funktionieren.
CSS scrollbar
Erstellt: 20.05.2023
Revision 03 vom 10.07.2025 - Im Generator zusätzliche Einstellung für die Scrollbar-Breite im Firefox sowie Erklärungen zur Kompatibilität der Einstellmöglichkeiten für die jeweiligen Browsertypen.