Browser-Bildlaufleisten stylen

2. Oktober 2022 | CSS-Stylesheet

Geschätzte Lesezeit für diesen Beitrag: ca. 2 Minuten.

Die Bildlaufleiste eines Webbrowsers – auch Scrollbar genannt – erscheint meistens in langweiligem grau-in-grau. Die Darstellung lässt sich aber mit ein wenig CSS-Code beeinflussen – so passt sie im Handumdrehen zum Design Ihrer Website.

Werfen Sie einen Blick rechts auf die Scrollbar, wenn Sie diesen Beitrag lesen: Der Schieberegler erscheint im selben grün und der Hintergrund im blau des Dr-Code-Visuals. Das haben mit einer Handvoll CSS-Code-Zeilen gelöst.

Diesen Code können Sie nach Ihren eigenen Bedürfnissen anpassen und in das CSS-Stylesheet Ihrer Website (unter Design/Customizer/Zusätziches CSS) einfügen:

/* Breite der Bildlaufleiste */
::-webkit-scrollbar {
	width: 25px;
}

/* Hintegrund der Bildlaufleiste */
::-webkit-scrollbar-track {
	background: #293280;
}
 
/* Styling des Schiebereglers */
::-webkit-scrollbar-thumb {
	background-image: linear-gradient(180deg,#59B14B 0%,#ffffff 100%)!important;
/* Sie wünschen keinen Farbverlauf?
   Entfernen Sie einfach die vorige Zeile (background-image) und verwenden Sie stattdessen die folgende Zeile (background). */
background: #59B14B;
	border-radius: 10px;
	border: 5px solid #293280;
}

/* Schieberegler beim hovern stylen */
::-webkit-scrollbar-thumb:hover {	
/* Hier können Sie eigenen CSS-Code einfügen, welcher die Darstellung des Schiebereglers beim hovern beeinflusst. */
}

Das Scrollbar-Styling beeinflusst übrigens sowohl vertikale wie horizontale Bildlaufleisten.

Die verschiedenen Farb-Einstellungen sollten Sie natürlich Ihrem Design entsprechend anpassen. Die Darstellung der Bildlaufleiste lässt sich dann sehr schön in die Gestaltung einbinden.

Werbung

Werbung

 

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.






Vielen Dank.

Pin It on Pinterest

Share This