Scrollbar mit CSS ändern (Chrome, Firefox und Co)

Mit CSS kannst du auch die Scrollbar deiner Website anpassen.

Wie du das machst, zeigen wir dir in diesem Beitrag.

Beachte, dass hierfür nicht zwangsläufig ein zusätzliches Plugin benötigt wird, wir empfehlen dir allerdings sehr, dir mal das Plugin WPCodeBox anzuschauen (Alternative zu Advanced Scripts), mit welchem du schnell und einfach zusätzlichen Code und Snippets in deine Website einbauen kannst.

In den meisten Fällen kannst du die gewünschten Anweisungen aber auch in das Feld “Zusätzliches CSS” im Customizer deiner WordPress-Website eingeben.

Hier eine kleine Übersicht, welche Bereiche der Scrollbar du mit CSS ansprechen kannst.

Dies ist allerdings nicht in allen Browsern möglich / gleich.

• ::-webkit-scrollbar: Mit diesem Selektor sprichst du die Breite der Scrollbar an.
• ::-webkit-scrollbar:horizontal{}: Eine horizontale Scrollleiste
• ::-webkit-scrollbar-button: Hiermit sprichst du den oberen und unteren Button bzw. die Pfeiltasten der Scrollbar an
• ::-webkit-scrollbar-thumb: Hiermit steuerst du den Scrollbalken
• ::-webkit-scrollbar-thumb:hover: Farbe des Scrollbalkens beim Hovern
• ::-webkit-scrollbar-track: Hintergrund der Scroll-Leiste
• ::-webkit-scrollbar-track-piece: Hiermit sprichst du den Teil des Scrollbalkens an, der nicht vom Griff abgedeckt wird.
• ::-webkit-scrollbar-corner: Hiermit beeinflusst du die untere Ecke der Bildlaufleiste, wo die horizontale und vertikale Bildlaufleiste zusammentreffen.
• ::-webkit-resizer: Hiermit sprichst du den verschiebbaren Größenänderungsgriff in der unteren Ecke des Browserfensters an.

Scrollbar in Chrome, Edge und Safari anpassen

Diese Browser verwenden WebKit-basierte Eigenschaften, um die Scrollbar anzupassen.

/* Für Chrome, Edge und Safari */
::-webkit-scrollbar {
    width: 12px; /* Breite der gesamten Scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Hintergrund der Scroll-Leiste */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Farbe des Scrollbalkens */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Farbe des Scrollbalkens beim Hover */
}

Scrollbar im Firefox-Browser ändern

In Firefox verwenden Sie eine andere Syntax, um die Scrollbar anzupassen.

/* Für Firefox */
scrollbar-width: thin; /* Kann "auto", "thin" oder "none" sein */
scrollbar-color: #888 #f1f1f1; /* Farbe des Scrollbalkens und des Hintergrunds */

Du kannst dies für bestimmte Elemente oder für den gesamten Body-Bereich anwenden:

body {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

Internet Explorer und ältere Browser

/* Für Internet Explorer 10+ */
body {
    -ms-overflow-style: -ms-autohiding-scrollbar;
}

Zusammenfassung und Beispiel

Hier ist ein vollständiges Beispiel, das die Anpassung der Scrollbar in den meisten modernen Browsern zeigt:

/* Allgemein für moderne Browser */
body {
    scrollbar-width: thin; /* Für Firefox */
    scrollbar-color: #888 #f1f1f1; /* Für Firefox */
}

/* Für Chrome, Edge und Safari */
::-webkit-scrollbar {
    width: 12px; /* Breite der gesamten Scrollbar */
}

::-webkit-scrollbar-track {
    background: #f1f1f1; /* Hintergrund der Scroll-Leiste */
}

::-webkit-scrollbar-thumb {
    background: #888; /* Farbe des Scrollbalkens */
}

::-webkit-scrollbar-thumb:hover {
    background: #555; /* Farbe des Scrollbalkens beim Hover */
}

Wichtig zu beachten

1. Konsistenz: Die Anpassungen werden nicht in allen Browsern gleich aussehen, da die Unterstützung und die Implementierung unterschiedlich sind.
2. Zugänglichkeit: Achten Sie darauf, dass die Farben ausreichend Kontrast bieten, um die Bedienbarkeit zu gewährleisten.
3. Testen: Testen Sie Ihre Anpassungen in allen Zielbrowsern, um sicherzustellen, dass sie wie gewünscht funktionieren.