Wordpress Performance Wordpress SEO Wordpress Security Wordpress Themes Wordpress Hosting Mein Setup Das Buch

CSS3 Browser Scrollbar

Wordpress CSS3 Browser Scrollbar WordPress Snippet

Eigene CSS3 Scrollbar im Browser

In einem ausführlichen Artikel habe ich euch bereits erklärt, wie sich eine CSS3 Scrollbar zusammensetzt und wie selbige realisiert werden kann. Doch nicht jeder hat Lust mit CSS3 zu spielen, nicht jeder kann oder will eine eigene Scrollbar für den Browser programmieren. Für alle von der bequemen Sorte, gibt es hier daher ein simples Snippet, welches einfach in die CSS-Datei eingefügt werden muss.

Folgendes in die Style.css eures Themes kopieren:

::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-button:start:decrement,::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-track-piece {
background-color: #FFFFFF;
}
::-webkit-scrollbar-thumb:vertical {
background: #000000;
border: 1px solid #FFFFFF;
}

Eigene Scrollbar als Mehrwert

Der obere Code ist exakt der selbe, wie ich ihn auf dieser Website hier selbst benutze. Er fügt eine ganz simple und einfache Scrollbar ein, ohne viel Extras, sehr minimalistisch und schlicht eben. Doch mit CSS3 lässt sich so gut wie alles realisieren, deshalb könnt ihr die Farben verändern, runde Ecken einfügen, sowie vieles mehr. Am Ende seht ihr dann eine eigens angepasste Browser Scrollbar, die zumindest aktuell noch, einen echten Mehrwert bietet. Sie rundet das Design ab und hinterlässt einen professionellen Eindruck beim Nutzer. Wer mehr über die Erstellung solch einer Scrollbar erfahren will, schaut hier vorbei.



Wordpress Performance eBook