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íkyNá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

  1. Petr 21.03.07 00:10

    Comment Arrow

    Ahoj, zkus se podívat na stránky http://www.dyn-web.com/…l-multi.html mrkni na jejich posuvníky ve Firefoxu, ale je to asi tentýž javascript, o kterém jsi psal.


  2. Pari 31.03.07 20:18

    Comment Arrow

    Cau, presne tyhle stránky jsem měl na mysli. Uvádím zde odkaz na fórum jakpsatweb.cz, kde se tento problém řešil a mimo jiné je tam také tento odkaz zmíněný.




O autorovi

Pari

Vítejte na mém blogu, rád bych se v krátkosti představil. Je mi 26 let. Momentálně nejvíce času věnuji projektu Lepime.cz - obchod se samolepkami na zeď a tvorbě webů postavených na redakčním systému Drupal pod značkou MEPA.CZ.