Preskoči na vsebino
TextArray1.87.0
100% lokalno

Generator CSS scrollbarja

Generirajte prilagojene CSS pravila za ::-webkit-scrollbar in scrollbar-width/scrollbar-color za vse preglednike v le nekaj klikov.

Izhod
Povezana orodja
Generator CSS sence kvadratkaOrodja za razvijalce
Ekstraktor barv CSS spremenljivkOrodja za razvijalce
Generator CSS prehodov in pospeškanovoOrodja za razvijalce
i18n tipka difOrodja za razvijalce
Pretvornik TOML v JSONOrodja za razvijalce
SQL v JSONOrodja za razvijalce
Generator CSS scrollbarja
Privzeta pregledniška scrollbarna komponenta se redko ujema s ostalim delom oblikovanja. Oblikovanje scrollbarja pomeni, da se morate spominjati na dva različna standarda hkrati: WebKit ::-webkit-scrollbar psevdo-elemente, ki jih uporabljajo Chrome, Safari in Edge, ter standardne lastnosti scrollbar-width/scrollbar-color, ki jih bere Firefox. To orodje generiše oba naenkrat iz nekaj možnosti, tako da prekopirate en blok CSS-a in vsak večji pregledilnik upodobi prilagojeno scrollbar.
Nastavite ciljni selektor — body za celoten splet, ali razred kot .sidebar za en drsni panel — nato izberite širino scrollbarja v pikslih, barve sledi in drsnika ter barvo, na katero se drsnik preklopi ob lebdenju. Zaobljenje drsnika nadzira border-radius povlečnega dela, vstavljena rob pa doda prozoren prostor med drsnik in sled, tako da izgleda kot lebdeča pilula namesto trdnega bloka. Možnost Različica preklaplja med navadno pregledniško scrollbar, tanjšo "tanko" in "skrito", ki v celoti odstrani scrollbar s scrollbar-width: none, medtem ko ohrani lastno drsenje elementa.
Če vključite različico temnega načina, se pravila zamotajo v @media (prefers-color-scheme: dark) blok, kjer se barve sledi in drsnika samodejno potemnijo, tako da splet, ki že preklaplja teme, dobi scrollbar, ki se preklaplja s temi — brez ločene kalkulacije. Vsaka možnost v realnem času posodobi izhod, medtem ko ga nastavite, poročilo pod rezultatom pa sporoči, koliko CSS blokov pravil je bilo generirano in natančno število znakov.
Vse se izvaja lokalno v vašem pregledniku: nobenega selektorja, barve ali CSS ni poslano na strežnik. Kopirajte rezultat naravnost v vašo stilsko datoteko, ga preuzmite kot .txt datoteko ali ga pošljite drugemu orodju za nadaljnje urejanje.
FAQ
Zakaj orodje generiše tako scrollbar-width kot ::-webkit-scrollbar pravila?
Ni enotne CSS lastnosti, ki bi bila podprta povsod. Firefox bere standardne lastnosti scrollbar-width in scrollbar-color, medtem ko Chrome, Safari in Edge odgovarjajo le starejšim ::-webkit-scrollbar psevdo-elementom. Če generirate oba, ista stilska datoteka deluje v vseh preglednikih.
Ali varijanta "Skrita" preneha element od drsenja?
Ne. Le skrije vidni scrollbar sled in drsnik z uporabo scrollbar-width: none in -ms-overflow-style: none. Element se še vedno normalno drsi z miško, trackpad-om ali dotikom — vsebina preprosto nima vidnega scrollbarja.
Kaj vstavka roba drsnika pravzaprav naredi?
Doda prozoren rob okoli drsnika s background-clip: padding-box, ki skrči vidno polnjenje navznoter od robov sledi. Ta prostor je tista, ki naredi, da drsnik izgleda kot zaobljena pilula namesto drsnika, ki se dotika obeh strani scrollbarja.
Kako se barve v temnem načinu izračunajo?
Vsaka barva, ki jo nastavite, se zmeša proti črni za fiksno količino in nastavi v @media (prefers-color-scheme: dark) blok, tako da splet, ki že preklaplja teme, dobi sorazmerno temnejšo sled in drsnik brez potrebe, da ročno izberete drug niz barv.
Ali se moj CSS ali barve, ki jih izberem, negdje nalagajo?
Ne. Scrollbar CSS se generiše v celoti v vašem pregledniku — nič, kar napišete ali izberete, nikoli ne zapusti vašo napravo.