Preskoči na sadržaj
TextArray1.87.0
100% lokalno

Generator CSS scrollbara

Generirajte prilagođene CSS pravile za ::-webkit-scrollbar i scrollbar-width/scrollbar-color za sve preglednike u samo nekoliko klikova.

Rezultat
Slični alati
Generator CSS sjene kutijeAlati za programere
Ekstractor CSS varijabli bojaAlati za programere
Generator CSS prijelaza i ubrzanjanovoAlati za programere
i18n tipka difAlati za programere
Konverter iz TOML u JSONAlati za programere
SQL u JSONAlati za programere
Generator CSS scrollbara
Zadana pregledničkog scrollbara rijetko odgovara ostatku dizajna. Stiliziranje scrollbara znači sjećanja na dva različita standarda istovremeno: WebKit ::-webkit-scrollbar pseudo-elemente koje koriste Chrome, Safari i Edge, te standardne svojstva scrollbar-width/scrollbar-color koja čita Firefox. Ovaj alat generiše oba odjednom iz nekoliko opcija, tako da kopirate jedan blok CSS-a i svaki veći preglednik renderira prilagođenu scrollbar.
Postavite ciljni selektor — body za cijelu stranicu, ili klasu kao .sidebar za jedan scrollabilni panel — zatim odaberite širinu scrollbara u pikselima, boje pozadine i palca, te boju na koju se palac prebacuje pri lebdenju. Zaobljenje palca kontrolira border-radius draživog dijela, a umetak okvira dodaje transparentan razmak između palca i pozadine tako da izgleda kao lebdeća pilula umjesto čvrstog bloka. Opcija Varijanta prebacuje između normalnog scrollbara preglednika, tanjem "tankom" i "skrivenom", koja uklanja scrollbar u potpunosti sa -ms-overflow-style i scrollbar-width: none dok zadržava vlastito scrollanje elementa.
Uključivanjem varijante tamnog moda omotava se drugi primjer pravila u @media (prefers-color-scheme: dark) blok, gdje se boje pozadine i palca automatski potamne kako stranica koja već prebacuje teme dobije scrollbar koji se prebacuje s njom — bez odvojene kalkulacije. Svaka opcija ažurira ispis uživo dok je podešavate, a popis ispod rezultata izvještava koliko je CSS blokova pravila generirano i točan broj znakova.
Sve se izvršava lokalno u vašem pregledniku: nijedan selektor, boja ili CSS nikada nije poslan na server. Kopirajte rezultat direktno u svoju stilsku stranicu, preuzmite kao .txt datoteku, ili pošalji u drugi alat da ga nastavite ažurirati.
FAQ
Zašto alat generiše i scrollbar-width i ::-webkit-scrollbar pravila?
Nema jedinstvenog CSS svojstva koje je podržano posvuda. Firefox čita standardna svojstva scrollbar-width i scrollbar-color, dok Chrome, Safari i Edge odgovaraju samo na starija ::-webkit-scrollbar pseudo-elementa. Generirajući oba znači da ista stilska stranica radi u svim preglednicima.
Da li varijanta "Skrivena" zaustavlja element od scrollanja?
Ne. Samo skriva vizualni scrollbar trag i palac koristeći scrollbar-width: none i -ms-overflow-style: none. Element se i dalje može scrollati s kotačem miša, trackpad-om ili dodirom — sadržaj jednostavno nema vidljive scrollbar.
Što vstavka okvira palca zapravo radi?
Dodaje transparentan okvir oko palca sa background-clip: padding-box, što skuplja vidljivi ispun prema unutra od rubova staze. Taj razmak je onaj koji čini da palac izgleda kao zaobljena pilula umjesto bara koji dodiruje obje strane scrollbara.
Kako se boje u temnom režimu izračunavaju?
Svaka boja koju postavite se miješa prema crnoj za fiksnom količinom i stavlja se unutar @media (prefers-color-scheme: dark) bloka, tako da stranica koja koristi automatski tamni režim dobije srazmjerno tamniju pozadinu i palac bez potrebe da ručno odaberete drugi set boja.
Da li se moj CSS ili boje koje odaberem negdje prate?
Ne. Scrollbar CSS se generiše u potpunosti u vašem pregledniku — ništa što napišete ili odaberete nikad napušta vašu kompu.