Nastylování scrollbaru pro všechny prohlížeče

Pro všetečné, není to tak jednoduché, jak se na první pohled zdá. Kdo zkusil, ví o čem mluvím.

Internet Explorer

Kupodivu tady je situace nejjednoduší, stačí odpovídajícímu prvku přidat sadu stylů v css souboru.

#div-with-coloured-scrollbar {
    scrollbar-face-color: #464a5d;
    scrollbar-arrow-color: #fff;
    scrollbar-highlight-color: #464a5d;
    scrollbar-3dlight-color: #fff;
    scrollbar-shadow-color: #464a5d;
    scrollbar-darkshadow-color: #fff;
    scrollbar-track-color: #fff;
}

Opera

Tady už je situace složitější. Musí být splněny dvě podmínky, aby obarvení scrollbaru fungovalo správně. První je ta, že uživatel musí mít povolenu vlastní definici barev pro scrollbar. Povolení provede zatrhnutím položky Zobrazit posuvníky v Nástroje->Nastavení->Pokročilé volby->Prohlížení. Dále díky „nedokonalenosti“ nebo z jiných důvodů musí být styl přiřazen napevno pro daný prvek v kódu.

<div style="
    scrollbar-face-color: #464a5d;
    scrollbar-arrow-color: #fff;
    scrollbar-highlight-color: #464a5d;
    scrollbar-3dlight-color: #fff;
    scrollbar-shadow-color: #464a5d;
    scrollbar-darkshadow-color: #fff;
    scrollbar-track-color: #fff;
"></div>

Firefox

V tomto ohledu je Firefox nedokonalý. Žádným css stylem nelze změnit barvy posuvníku ve Firefoxu. Viděl jsem jen možnost přes JavaScript, která je pomerně komplikovaná. Budete se prostě muset smířit s tím, že uživatelé Firefoxu obarvené scrollbary neuvidí. Více informací nalaznete v tomto fóru.

Nejlepší je samozřejmě barvy scrollbaru ponechat na prohlížeči. Uživatelé jsou totiž na tyto barvy zvyklý. Někdy se tomu ale nevyhneme, a proto jsem napsal tento článek. Rozhodl jsem se nevěnovat konkrétnímu barvení scrollbarů, protože takových článků je na internetu dostatek – Barvení rolovací lišty, dokonce existují i generátory barevných scrollbarů.

Komentáře

O autorovi