O webu
Šířka posuvníku

Rolovací lišta (posuvník, scrollbar) je nedílnou součástí stránky v desktopových prohlížečích v případě, že se obsah nevejde do vymezeného prostoru.

Posuvník ubírá prostor pro stránku – zmenšuje viewport.

To může způsobovat poskakování stránky v případech, kdy:

  1. Na webu jsou hodně krátké stránky, které posuvník nepotřebují. Při přechodu mezi dlouhou stránkou s posuvníkem a krátkou obsah poskočí.

  2. U vyskakovacího překryvného obsahu (tzv. lightboxu) se zpravidla blokuje možnost rolovat v původní stránce.

    To se dělá přes overflow: hidden, což posuvník odstraní.

Rozměry posuvníku

Aktuální šířka posuvníku je: pixelů

Posuvníky ve Windows 10 mají v Chrome, Firefoxu, Opeře, Internet Exploreru šířku 17 pixelů.

Výjimkou je Edge s šířkou 12 pixelů.

V mobilních prohlížečích a na OS X se potom posuvník zobrazuje jen někdy (když se začne rolovat) a neubírá prostor pro stránku. V těchto zařízeních by se měla ukazovat nula.

Nejrozmanitější je velikost rolovacích lišt v Linuxu, například v Ubuntu 14.04 má posuvník ve Firefoxu 15 pixelů a v Chrome jen 13.

Zobrazuje se vám nějaká jiná šířka nebo pozorujete jiné chování? Dejte mi prosím vědět do komentářů.

Zjištění šířky posuvníku

Na nějakou universální šířku tedy nejde spoléhat. Maximálně jde orientačně vycházet z toho, že posuvník má šířku do cca 20 pixelů.

Pokud je potřeba počítat s přesnými rozměry, je nutné rozměr posuvníku spočítat v konkrétním prohlížeči.

Jak?

Výpočet šířky posuvníku

Třeba změřit šířku obyčejného <div>u a potom jinému <div>u natvrdo přidat posuvník pomocí overflow-y: scroll, dát do něj další <div>, který už bude užší o šířku scrollbaru.