CSS - Schuifbalken opmaken Google Chrome en Safari


Vroeger toen Internet Explorer nog de meest gebruikte browser was zag je het met regelmaat, websites die gekleurde schuifbalken gebruikten. Toen heel normaal, tegenwoordig is dit iets wat niet meer gebruikt kan worden binnen Internet Explorer en daarnaast was er al geen ondersteuning van andere browsers zoals bijvoorbeeld Firefox.

Webkit

Echter is het tegenwoordig wel mogelijk om in Google Chrome en Safari de schuifbalk van een eigen opmaak te voorzien zoals ook is gedaan op deze pagina. Aan de linkerkant zie je mits je Google Chrome of Safari gebruikt dat de schuifbalk een andere opmaak heeft dan gebruikelijk. Het opmaken van de schuifbalk kan eenvoudig met de volgende code.

Zo stel je bijvoorbeeld ronde hoeken in, een achtergrond, schaduw, kleur en andere zaken die je normaal toepast op andere elementen, zelfs een mouse-over kan ingesteld worden. De code zoals toegepast op deze pagina zie je hieronder. Als eerste zie je webkit-scrollbar staan, dit betreft de gehele schuifbalk en dus ook de breedte van de schuifbalk, eronder staat een mouse-over ingesteld. Webkit-scrollbar-track betreft het gedeelte waarbinnen de schuifbalk schuift en webkit-scrollbar-thumb is het gedeelte wat je vastpakt met de muis.

Met webkit-scrollbar-track-piece kun je het gedeelte vormgeven voor en na het gedeelte wat schuift. Als laatste kun je zelf afbeeldingen instellen voor de pijtjes boven en onder.

::-webkit-scrollbar {
        -webkit-appearance: none;
        width:10px;
        background-color:#ebebeb;
}

::-webkit-scrollbar:hover {
        background-color:#ebebeb;
}

::-webkit-scrollbar-track {
}

::-webkit-scrollbar-thumb {
        background-color:#999;
        border-radius:5px;
}

::-webkit-scrollbar-thumb:hover {
        background-color:#666;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
        height:15px;
        background-color:#ebebeb;
        background-image:url(arrow_up.png);
        background-repeat: no-repeat;
}

::-webkit-scrollbar-button:end:increment {
        background-image: url(arrow_down.png);
}