Stylování rolovacích lišt (scrollbarů) v HTML, CSS a JavaScriptu

Rolovací lišty, často označované jako scrollbary, jsou nedílnou součástí webových stránek, které zobrazují obsah přesahující rozměry prvku. Historicky byly šedivé lišty s rámy často "čárou přes design" a kazily celkový vzhled stránky. Dnes však existují různé metody, jak jim dát alespoň co se barev týče, vlastní tvář.

Stylování v Internet Exploreru

Barvení lišty je v Internet Exploreru realizováno pomocí nových CSS vlastností začínajících scrollbar-něco-color. Tyto vlastnosti umožňují definovat barvy pro různé části rolovací lišty. Názvy těchto vlastností jsou poměrně popisné.

Nastavenou barvou (například červenou) se obarví některé části lišty. Konkrétně se jedná o face, 3dlight a svrchní barva oblasti track. Ostatní části získají highlight a spodní track. Kdyby se nezapsaly všechny vlastnosti, lišta by dědila přednastavené barvy. Nelze obarvit rolovací lištu u prvku <select>.

Příklad vlastností pro Internet Explorer:

  • scrollbar-face-color
  • scrollbar-3dlight-color
  • scrollbar-darkshadow-color
  • scrollbar-highlight-color
  • scrollbar-shadow-color
  • scrollbar-track-color
  • scrollbar-arrow-color

V případě vložených rámů (iframe) se rolovací lišty barví z té stránky, ve které jsou vložené. Pokud chcete obarvit rolovací lišty uvnitř iframe, je potřeba vložit CSS styly až do stránky, která se do iframe načítá (atributem src).

Stylování v Chrome a dalších moderních prohlížečích

Chrome také umožňuje stylovat rolovací lištu, ale dělá to jiným přístupem. Vlastnosti pro Chrome popisuji níže. Dále ještě existují vlastnosti ::-webkit-scrollbar-track-piece a další pseudoelementy, které se dají vyselektovat v dokumentu a poté formátovat běžnými CSS vlastnostmi. Tyto vlastnosti začínají prefixem ::-webkit-.

Čtěte také: Efektivní dotazníky v Surviu

Příklad vlastností pro Webkit prohlížeče (Chrome, Safari, Opera):

  • ::-webkit-scrollbar: Celý scrollbar.
  • ::-webkit-scrollbar-button: Tlačítka nahoru a dolů.
  • ::-webkit-scrollbar-thumb: Posuvník.
  • ::-webkit-scrollbar-track: Dráha posuvníku.
  • ::-webkit-scrollbar-track-piece: Kus dráhy, který není pokryt posuvníkem.
  • ::-webkit-scrollbar-corner: Roh scrollbaru.
  • ::-webkit-resizer: Resizer, který umožňuje změnu velikosti prvku tažením za spodní růžek.

Vlastnost overflow

Vlastnost overflow je klíčová pro práci s obsahem, který přesahuje rozměry rodičovského prvku. Pomocí této vlastnosti můžete ovlivnit, jak se bude nadbytečný obsah chovat. Hodnota overflow: auto přidá rolovací lištu, pouze pokud je potřeba (pokud obsah vyteče z rozměru prvku). Oříznutý element se dělá pomocí overflow: hidden. Hodnota overflow: visible nechá obsah z prvku vytékat, pokud je delší, ale vytékající text může překrýt následující obsah.

Rolovací lišty se dají přidat prvku vždy pomocí hodnoty scroll. To zajistí, že rolovací lišty budou viditelné, i když nejsou aktuálně potřeba. To je lepší z hlediska stability rozložení, protože se prvek nebude "posouvat" po zobrazení nebo skrytí scrollbarů. Proč to musí mít overflow? Protože overflow definuje, jak se bude prvek chovat, když se obsah stane větším než je jeho rozměr.

Můžete také ovlivnit směr přetečení pomocí overflow-x (horizontální) a overflow-y (vertikální) pro řízení obsahu jenom v jednom směru.

Hodnoty pro vlastnost overflow:

  • visible: Obsah, který přesahuje rozměry prvku, zůstane viditelný a může překrývat další obsah.
  • hidden: Obsah, který přesahuje rozměry prvku, se ořízne a nebude viditelný. Rolovací lišty se vůbec nepoužijí.
  • scroll: Rolovací lišty se vždy zobrazí, i když obsah nepřesahuje rozměry prvku.
  • auto: Rolovací lišty se zobrazí pouze v případě, že je obsah větší než rozměry prvku.

Vlastnost scrollbar-gutter

scrollbar-gutter je další CSS vlastnost úzce svázaná s overflow. Má smysl používat ji jen v souvislosti s overflow. Tato vlastnost umožňuje rezervovat prostor pro rolovací lištu, i když není aktuálně potřeba. Tím se zabrání nechtěným posunům obsahu, když se rolovací lišta objeví nebo zmizí. Podpora postupně od roku 2021, nejdříve v Chrome.

Příklad použití scrollbar-gutter: stable; zajistí, že se vždy rezervuje místo pro rolovací lištu, a to i v situaci, kdy není potřeba rolovací lišta. Tím se udržuje stabilní rozložení stránky.

Čtěte také: Kustomizace posuvníku a iframe

Důležité poznámky

  • Při stylování rolovacích lišt pro tag body byste měli styly aplikovat spíše pro html.
  • Je důležité přemýšlet o psychické podpoře čtenářů. Barvení rolovacích lišt dvěma odstíny by jim klidně mohla způsobit morální šok, pokud by bylo provedeno necitlivě.
  • Ujistěte se, že vaše stylování respektuje přístupnost a kontrast.

Prohlížeče jako Konqueror a Internet Explorer od verze 5.5 podporují určité stylování. V prohlížeči Opera verze 7.2 (možná 7.1) se dalo barvení lišty zapnout: File > Preferences...

Vlastnost Popis Podpora prohlížečů (obecně)
scrollbar-*-color Stylování barev rolovací lišty (IE specifické) Internet Explorer
::-webkit-scrollbar-* Stylování rolovací lišty (WebKit prohlížeče) Chrome, Safari, Opera (WebKit/Blink)
overflow Definuje, jak se prvek chová při přetečení obsahu Všechny moderní prohlížeče
scrollbar-gutter Rezervuje místo pro rolovací lištu Moderní prohlížeče (Chrome od 2021)

Čtěte také: jak upravit scrollbar

tags: #rolovací #lišta #HTML #CSS #JavaScript

Oblíbené příspěvky: