Posúvač - Triky CSS | Almanach CSS 2025

Stručná história tvarovania posúvačov:

Bývala to vec, ktorú mohol robiť iba Internet Explorer (starodávne verzie) s podobnými vecami -ms-scrollbar-base-color. Tieto už neexistujú.
Potom sa motory prehľadávačov založené na WebKit dostali na palubu podobných vecí ::-webkit-scrollbar. To je to, čo táto položka z Alamanacu väčšinou pokrýva, pretože dnes funguje v prostredí Safari / Chrome.
Normy sa konečne zapojili a tieto možnosti štýlov sú pokryté neprefixovanými vlastnosťami, ako je posuvník-farba a šírka-riadok.

Za -webkitpredponou dodávateľa sú uvedené štýlové posuvné pruhy pre svet Safari / Chrome .

Tento záznam v kalendári predstavuje prehľad. Podrobnejšie informácie o práci s prispôsobenými posuvnými lištami nájdete 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í sa skladá zo siedmich rôznych pseudo-prvky, ktoré spoločne tvoria úplný posuvník prvok používateľského rozhrania:

::-webkit-scrollbarrieši pozadie samotného pruhu. Zvyčajne je pokrytá ostatnými prvkami
::-webkit-scrollbar-button adresuje smerové tlačidlá na posuvnom paneli
::-webkit-scrollbar-track adresuje prázdne miesto „pod“ indikátorom priebehu
::-webkit-scrollbar-track-piece je najvyššia vrstva ukazovateľa priebehu, ktorá nie je pokrytá posuvným rolovacím prvkom (palec)
::-webkit-scrollbar-thumb adresuje posúvateľný posúvací prvok, ktorého veľkosť sa mení v závislosti od veľkosti posúvateľného prvku
::-webkit-scrollbar-corner adresuje (zvyčajne) dolný roh posúvacieho prvku, kde by sa mohli stretnúť dva posuvníky
::-webkit-resizeradresuje posuvnú rukoväť na zmenu veľkosti, ktorá sa zobrazuje nad scrollbar-cornerv dolnom rohu niektorých prvkov

Okrem týchto pseudoprvkov existuje aj jedenásť tried pseudo-selektorov, ktoré sa nevyžadujú, ale poskytujú návrhárom možnosť upravovať rôzne stavy a interakcie používateľského rozhrania posúvača. Úplný rozpis týchto pseudoselektorov a podrobný príklad nájdete v tomto článku o CSS-Tricks.

Vyskúšajte toto pero!

Body záujmu

Ak pred rôznymi pseudoelementmi neexistuje kvalifikačný selektor, použijú sa štýly na ľubovoľný posúvač, ktorý sa môže na stránke zobraziť.
Nastavenie -webkit-scrollbarštýlov je dobrý spôsob, ako vynútiť, aby vaše webové stránky zobrazovali vodorovné alebo zvislé posuvné pruhy vo verziách systému Mac OS novších ako Lion, na ktorých sú posuvné pruhy zvyčajne predvolene skryté.
Pretože táto vlastnosť je za -webkitpredponou dodávateľa, bolo napísaných niekoľko doplnkov jQuery na „polyfill“ alebo rozširujúcich túto funkcionalitu na ďalšie prehľadávače. Jedným z takýchto doplnkov je jScrollPane.

Podpora prehľadávača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.