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

Mit CSS können Sie auch die Scrollbar Ihrer Website anpassen.

Wie Sie das machen, zeigen wir Ihnen in diesem Beitrag.

Beachten Sie, dass hierfür nicht zwangsläufig ein zusätzliches Plugin benötigt wird. Wir empfehlen Ihnen allerdings sehr, sich mal das Plugin WPCodeBox anzuschauen (Alternative zu Advanced Scripts), mit welchem Sie schnell und einfach zusätzlichen Code und Snippets in Ihre Website einbauen können.

In den meisten Fällen können Sie die gewünschten Anweisungen aber auch in das Feld “Zusätzliches CSS” im Customizer Ihrer WordPress-Website eingeben.

Hier eine kleine Übersicht, welche Bereiche der Scrollbar Sie mit CSS ansprechen können.

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

• ::-webkit-scrollbar: Mit diesem Selektor sprechen Sie die Breite der Scrollbar an.
• ::-webkit-scrollbar:horizontal{}: Eine horizontale Scrollleiste
• ::-webkit-scrollbar-button: Hiermit sprechen Sie den oberen und unteren Button bzw. die Pfeiltasten der Scrollbar an
• ::-webkit-scrollbar-thumb: Hiermit steuern Sie den Scrollbalken
• ::-webkit-scrollbar-thumb:hover: Farbe des Scrollbalkens beim Hovern
• ::-webkit-scrollbar-track: Hintergrund der Scroll-Leiste
• ::-webkit-scrollbar-track-piece: Hiermit sprechen Sie den Teil des Scrollbalkens an, der nicht vom Griff abgedeckt wird.
• ::-webkit-scrollbar-corner: Hiermit beeinflussen Sie die untere Ecke der Bildlaufleiste, wo die horizontale und vertikale Bildlaufleiste zusammentreffen.
• ::-webkit-resizer: Hiermit sprechen Sie 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 */

Sie können 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.