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

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Zvýraznění aktivní kotvy

Zvýraznění aktivované kotvy (:target)

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.

Odkaz na kotvu a fixní menu

Odkaz na kotvu a fixní hlavička

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Poskakování kvůli scrollbaru

Poskakování stránky kvůli posuvníku

Jak zabránit, aby centrovaný obsah stránky měli posici v závislosti na posuvníku.

Přichytávací rolování v CSS

Přichytávací rolování v CSS

CSS vlastnost scroll-snap dokáže řídit rolování, aby přeskakovalo mezi jednotlivými elementy.

Zachování posice scrollování overflow-anchor

Zachování posice scrollování overflow-anchor

CSS vlastnost overflow-anchor umožňuje nastavit, jak si má prohlížeč pamatovat, kam bylo odscrollováno.

Komentáře