O webu
Vlastní styl posuvníku

Posuvník je nedílnou součástí většiny webů. Jelikož je jeho vzhled řízení prohlížečem / operačním systémem, nemusí zapadat ke vlastnímu vzhledu stránky – pomocí CSS to jde změnit.

Změny stylu si je dobré pořádně rozmyslet, protože příliš kreativní vzhled může být pro uživatele nejasný.

V roce 2017 stále není možné měnit vzhled posuvníku jen pomocí CSS s dobrou podporou napříč prohlížeči.

Webkit

Asi nejpokročilejší možnosti nabízí prohlížeče používající jádro Webkit/Blink (Chrome, Opera). Jednotlivé prvky posuvníku jsou v podstatě pseudo-elementy, které jde stylovat běžnými CSS způsoby.

Bez uvedení konkrétnějšího selektoru před ::-webkit-scrollbar* budou nastylovány všechny posuvníky na stránce se nacházející.

Posuvník je rozdělen na několik částí:

  1. ::-webkit-scrollbar – tělo posuvníku
  2. ::-webkit-scrollbar-button – tlačítka pro posun nahoru/dolů
  3. ::-webkit-scrollbar-track – prostor mezi šipkami nahoru/dolů
  4. ::-webkit-scrollbar-track-piece – pozadí za jezdcem posuvníku
  5. ::-webkit-scrollbar-thumb – jezdec posuvníku
  6. ::-webkit-scrollbar-corner – roh mezi vodorovným a svislým posuvníkem
  7. ::-webkit-resizer – roh, za který lze měnit velikost

Zjednodušené vysvětlení:

Příklad posuvníku v Chrome

Živá ukázka

Internet Explorer

V Internet Exploreru není posuvník sestaven z pseudo-elementů ::scrollbar-*, ale používají se speciální CSS vlastnosti.

  • scrollbar-track-color: barva – pozadí posuvníku
  • scrollbar-face-color: barva – barva jezdce posuvníku
  • scrollbar-arrow-color: barva – barva šipek

Pro barvu stínů/rámečku existují ještě další vlastnosti, některé se v Internet Exploreru 11 neprojevují:

  • scrollbar-shadow-color: barva – barvy stínu/rámečku kolem jezdce posuvníku
  • scrollbar-highlight-color: barva
  • scrollbar-3dlight-color: barva – barva levé a horní hrany posuvníku
  • scrollbar-darkshadow-color: barva

Živá ukázka

Popis jednotlivých částí posuvníku ve starých IE.

Příklad posuvníku v Chrome

V IE 11 je zajímavá vlastnost scrollbar-base-color, která na základě zadané barvy přizpůsobí všechny potřebné odstíny pro jednotlivé části posuvníku.

Přebarvení jedinou barvou v IE 11

Živá ukázka

O barvení posuvníku ve starších IE:

Microsoft Edge

Stylovat posuvník pomocí CSS není možné.

Žádost o přidání této funkcionality dostala v roce 2015 prioritu medium:

Firefox

Stylovat posuvník pomocí CSS není možné.

Absence stylování scrollbaru je evidována jako bug z roku 2000:

Posuvník v JavaScriptu

Pro jednotné zobrazení posuvníku napříč prohlížeči je jediná spolehlivá možnost posuvník zajistit po svém pomocí JavaScriptu.

Aby bylo zachováno standardní chování – rychlost posunu, ovládání dotykem a setrvačnost, jde využít elementu s overflow: auto obaleného do elementu s nižší šířkou o rozměr posuvníku, čímž se výchozí scrollbar ořízne.

Živá ukázka

JavaScript potom slouží pouze pro indikaci a drag & drop posouvání.

Odkazy jinam