Posuvník - Triky CSS | Almanach CSS 2025

Stručná historie stylingu posuvníků:

Bývala to věc, kterou mohl dělat pouze Internet Explorer (staré verze) s podobnými věcmi -ms-scrollbar-base-color. Ty už neexistují.
Pak se motory prohlížeče založené na WebKit dostaly k podobným věcem ::-webkit-scrollbar. To je to, co tato položka Alamanac většinou pokrývá, protože dnes funguje v prostředí Safari / Chrome.
Standardy se konečně zapojily a tyto možnosti stylingu jsou pokryty nepředponovanými vlastnostmi, jako je barva posuvníku a šířka posuvníku.

Styling posuvníky pro svět Safari / Chrome je vystaven za -webkitpředponou dodavatele.

Tato položka v almanachu je přehledem, podrobnější rozbor práce s vlastními posuvníky naleznete v tomto článku CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarRodina vlastností se skládá ze sedmi různých pseudo-prvky, které společně tvoří úplný posuvník prvek uživatelského rozhraní:

::-webkit-scrollbarřeší pozadí samotné lišty. Obvykle je pokryta ostatními prvky
::-webkit-scrollbar-button adresuje směrová tlačítka na posuvníku
::-webkit-scrollbar-track adresuje prázdné místo „pod“ ukazatelem průběhu
::-webkit-scrollbar-track-piece je nejvyšší vrstva postupového pruhu, která není pokryta posuvným rolovacím prvkem (palec)
::-webkit-scrollbar-thumb adresuje posuvný rolovací prvek, jehož velikost se mění v závislosti na velikosti rolovacího prvku
::-webkit-scrollbar-corner adresuje (obvykle) spodní roh rolovatelného prvku, kde se mohou setkat dva posuvníky
::-webkit-resizerřeší tažný úchyt pro změnu velikosti, který se objeví nad scrollbar-cornerv dolním rohu některých prvků

Kromě těchto pseudoprvků existuje také jedenáct tříd pseudo-selektorů, které se nevyžadují, ale poskytují návrhářům možnost stylovat různé stavy a interakce uživatelského rozhraní posuvníku. Úplný rozpis těchto pseudoselektorů a podrobný příklad naleznete v tomto článku o tricích CSS.

Podívejte se na toto pero!

Body zájmu

Pokud před různými pseudoelementy před žádným voličem není žádný selektor, použijí se styly na libovolný posuvník, který se může na stránce objevit.
Nastavení -webkit-scrollbarstylů je dobrý způsob, jak vynutit, aby vaše webové stránky zobrazovaly vodorovné nebo svislé posuvníky ve verzích systému Mac OS novějších než Lion, na kterých jsou posuvníky ve výchozím nastavení obvykle skryty.
Protože tato vlastnost je za -webkitpředponou dodavatele, bylo několik pluginů jQuery napsáno na „polyfill“ nebo rozšířilo tuto funkci o další prohlížeče. Jedním z takových pluginů je jScrollPane.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.