Úprava vzhledu rolovací lišty (scrollbaru) pomocí CSS
V minulosti, kdy weby často používaly rámy, dělaly šedivé rolovací lišty "čáru přes design". Dnes už se rolovací lišty dají alespoň co se barev týče přizpůsobit. Podpora pro stylizování rolovacích lišt se liší napříč prohlížeči, ale existují způsoby, jak ovlivnit jejich vzhled.
Styling rolovacích lišt v Internet Exploreru
Barvení lišty je v Exploreru realizováno pomocí nových CSS vlastností začínajících scrollbar-něco-color. Tyto názvy vlastností se používají pro nastavení barvy různých částí lišty.
Nastavenou barvou (například červenou) se obarví některé části lišty. Konkrétně se obarví "face", "3dlight" a svrchní barva oblasti "track". Ostatní části získají "highlight" a spodní "track" se obarví barvami odvozenými. Kdyby se nezapsaly všechny vlastnosti, lišta by dědila přednastavené barvy. Nelze obarvit rolovací lištu pro <select> element.
Pokud se vkládají rámy (
Styling rolovacích lišt v Chromu a WebKitu
Prohlížeče založené na WebKitu (Chrome, Safari, Opera, Edge) podporují specifické pseudoelementy pro úpravu rolovacích lišt. Zápisy pro Chrome jsou popsány níže. Tyto pseudoelementy umožňují vyselektovat rolovací lištu v dokumentu a poté ji formátovat běžnými CSS vlastnostmi.
Čtěte také: Kustomizace posuvníku a iframe
Existují vlastnosti jako ::-webkit-scrollbar-track-piece.
Příklady pseudoelementů pro WebKit prohlížeče:
- ::-webkit-scrollbar: Celá rolovací lišta.
- ::-webkit-scrollbar-button: Tlačítka na koncích rolovací lišty.
- ::-webkit-scrollbar-track: Pozadí rolovací lišty (dráha, po které se pohybuje palec).
- ::-webkit-scrollbar-track-piece: Kus dráhy rolovací lišty, kde není palec.
- ::-webkit-scrollbar-thumb: Posuvník (palec) rolovací lišty.
- ::-webkit-scrollbar-corner: Roh mezi dvěma rolovacími lištami.
Vlastnost overflow
Vlastnost overflow určuje, co se stane, když obsah prvku "vyteče" z jeho rozměrů. Pokud je obsah větší než určená height prvku, overflow řídí jeho zobrazení.
Hodnoty vlastnosti overflow:
- visible: Toto je výchozí hodnota. Obsah z prvku vytéká, pokud je delší. Vytékaný text může překrýt následující obsah. Toto není pozicování, ale je to prostě jenom vytékání. Vytékající obsah se občas vůbec nepoužívá, jelikož se může překrýt s dalším obsahem.
- hidden: Oříznutý element se dělá pomocí overflow: hidden. Obsah, který přesahuje hranice prvku, je skryt a nejsou zobrazeny žádné rolovací lišty.
- scroll: Rolovací lišty se dají přidat prvku vždy. Pomocí hodnoty scroll se vždy zobrazí rolovací lišty (horizontální i vertikální), i když obsah nepřesahuje rozměry prvku. To může být lepší, protože uživatel vždy ví, že element obsahuje scrollbar.
- auto: Rolovací lišty se zobrazí pouze v případě, že obsah přesahuje rozměry prvku. Pokud obsah nepřesahuje, lišty se nezobrazí. Tato hodnota je často nejpraktičtější.
Existuje také hodnota overflow-x a overflow-y, které umožňují ovládat přetečení obsahu jenom v jednom směru (horizontálním nebo vertikálním).
Scrollbar-gutter
Scrollbar-gutter je další CSS vlastnost úzce svázaná s overflow. Má smysl používat ji jen v souvislosti s overflow. Podpora postupně od roku 2021, nejdříve v Chrome. Využívá se pro situaci, kdy není potřeba rolovací lišta.
Důležité poznámky k použitelnosti
Při stylizování rolovacích lišt je důležité myslet na použitelnost a psychickou pohodu čtenářů. Extrémní barevné kombinace nebo příliš agresivní design by jim klidně mohly způsobit morální šok. Měli byste se snažit o decentní a funkční design, který doplňuje celkový vzhled stránky, aniž by rušil uživatele.
Čtěte také: Efektivní dotazníky v Surviu
Rolovací lišty pro tag body se nastavují pro html.
Příklady a implementace
Jako vždy si udělejme základní ukázku. V následujícím cvičení, Řešené úlohy k 15.-16. lekci Bootstrap CSS frameworku, si procvičíme nabyté zkušenosti z předchozích lekcí.
Pro dropdown menu se používá <button> s třídou .btn a atributem data-bs-toggle="dropdown". Samotné menu je <div> s třídou .dropdown. Položkám menu přiřazujeme třídu .dropdown-item. Pro správné pozicování má hlavní <div> relativní pozici.
Typy dropdownů:
- Jeden se nazývá jako Split dropdown.
- Druhé je tvořeno pouze částí s šipkou, která rozbaluje nabídku.
K tlačítku lze přidat i třídu pro nastavení barvy. Lze nechat nabídku rozbalovat směrem nahoru, nebo k levé straně tlačítka, které ji otevírá. Do dropdownu je dokonce možné vložit celý formulář.
Dropdowny lze kromě data atributů inicializovat pomocí JavaScriptu, aby pracovala přímo s nativním JavaScriptem. Použití JavaScriptu je stále vyžadováno.
Čtěte také: Krajová lišta WPC - montáž
Změna velikosti prvku
Díky CSS vlastnosti resize lze tažením myší nebo prstem za růžek prvku měnit jeho velikost. Tato vlastnost vyžaduje použití overflow. Dále ještě existují vlastnosti, které umožňují měnit velikost prvku tažením za spodní růžek.
Zadáním dvou hodnot oddělených čárkou (například "10%, 10px") je možné nastavit konkrétní rozměry.
| Vlastnost CSS | Popis | Podpora (Explorer) | Podpora (Chrome/WebKit) |
|---|---|---|---|
| scrollbar-face-color | Barva povrchu posuvníku | IE 5.5+ | Ne |
| scrollbar-track-color | Barva pozadí dráhy posuvníku | IE 5.5+ | Ne |
| scrollbar-shadow-color | Barva stínu posuvníku | IE 5.5+ | Ne |
| ::-webkit-scrollbar | Celá rolovací lišta | Ne | Ano |
| ::-webkit-scrollbar-thumb | Posuvník (palec) rolovací lišty | Ne | Ano |
| ::-webkit-scrollbar-track | Pozadí rolovací lišty | Ne | Ano |
| overflow: auto | Lišta se zobrazí jen, když je potřeba | Všechny prohlížeče | Všechny prohlížeče |
| overflow: scroll | Lišta se zobrazí vždy | Všechny prohlížeče | Všechny prohlížeče |
| resize | Změna velikosti prvku uživatelem | Ne | Částečná |
tags: #css #rolovaci #lista #navod

