Sări la conținut
TextArray1.87.0
Complet local

Generator de stil pentru scrollbar CSS

Generează reguli CSS personalizate ::-webkit-scrollbar și scrollbar-width/scrollbar-color.

Ieșire
Instrumente conexe
Generator de CSS box-shadowInstrumente pentru dezvoltatori
Extractor de variabile de culoare CSSInstrumente pentru dezvoltatori
Generator de easing și tranziție CSSnouInstrumente pentru dezvoltatori
Diferența tastei i18nInstrumente pentru dezvoltatori
Convertor TOML în JSONInstrumente pentru dezvoltatori
SQL în JSONInstrumente pentru dezvoltatori
Generator de stil pentru scrollbar CSS
Scrollbar-ul implicit al browserului rar se potrivește cu restul unui design, iar stilizarea acestuia înseamnă a memora două specificații diferite în același timp: pseudo-elementele ::-webkit-scrollbar din WebKit pe care Chrome, Safari și Edge le utilizează, și proprietățile standard scrollbar-width/scrollbar-color pe care Firefox le citește. Acest instrument generează ambele simultan dintr-o mână de opțiuni, deci copiați un bloc CSS și fiecare browser major renderizează o scrollbar corespunzătoare.
Setați un selector țintă — body pentru întreaga pagină, sau o clasă cum ar fi .sidebar pentru un panou derulabil — apoi alegeți lățimea scrollbar-ului în pixeli, culorile pistei și indicatorului, și culoarea la care indicatorul se schimbă la hover. Rotunjirea indicatorului controlează border-radius-ul barei tragabile, iar marginea încorporată adaugă un spațiu transparent între indicator și pistă pentru ca acesta să arate ca o pildulă plutitoare în loc de un bloc solid. Opțiunea Variantă alternează între scrollbar-ul normal al browserului, una mai subțire numită "Subțire", și "Ascunse", care elimină complet scrollbar-ul cu -ms-overflow-style și scrollbar-width: none păstrând derularea proprie a elementului intactă.
Activând varianta pentru modul întunecat, se încapsulează o a doua copie a regulilor într-un bloc @media (prefers-color-scheme: dark), cu culorile pistei și indicatorului automat mai închise, deci un site care deja alternează teme are o scrollbar care se schimbă cu aceasta — fără calcul separat necesar. Fiecare opțiune actualizează rezultatul în timp real pe măsură ce ajustați, iar totalul sub rezultat raportează câte blocuri de reguli CSS au fost generate și numărul exact de caractere.
Totul rulează local în browserul dvs.: niciun selector, culoare sau CSS nu este niciodată trimis la un server. Copiați rezultatul direct în foaia dvs. de stil, descărcați ca fișier .txt, sau trimiteți la intrarea unui alt instrument pentru a continua să o rafinați.
FAQ
De ce generează instrumentul reguli scrollbar-width și ::-webkit-scrollbar?
Nicio proprietate CSS nu este suportată peste tot. Firefox citește proprietățile standard scrollbar-width și scrollbar-color, în timp ce Chrome, Safari și Edge răspund doar la pseudo-elementele mai vechi ::-webkit-scrollbar. Generarea ambelor înseamnă că aceeași foaie de stil funcționează în toate browserele.
Varianta "Ascunse" oprește elementul să se deruleze?
Nu. Doar ascunde pista scrollbar-ului vizual și indicatorul folosind scrollbar-width: none și -ms-overflow-style: none. Elementul se derulează în continuare normal cu o roată de mouse, trackpad sau atingere — conținutul simplu nu are scrollbar vizibil.
Ce face de fapt marginea încorporată a indicatorului?
Adaugă o margine transparentă în jurul indicatorului cu background-clip: padding-box, care micșorează umplerea vizibilă în interior de la marginile pistei. Acel spațiu este ceea ce face unui indicator să arate ca o pildulă rotunjă în loc de o bară care atinge ambele laturi ale scrollbar-ului.
Cum sunt calculate culorile modului întunecat?
Fiecare culoare pe care o setați este amestecată către negru printr-o cantitate fixă și plasată într-un bloc @media (prefers-color-scheme: dark), deci un site care utilizează modul întunecat automat obține o pistă și un indicator proporțional mai închise fără a trebui să alegeți un al doilea set de culori manual.
CSS-ul meu sau culorile pe care le aleg sunt încărcate undeva?
Nu. CSS-ul scrollbar-ului este generat complet în browserul dvs. — nimic din ceea ce tastați sau selectați nu pleacă niciodată de pe dispozitivul dvs.