Ugrás a tartalomhoz
TextArray1.87.0
100% helyi

CSS görgetősáv stílus generátor

Hozza létre az egyéni ::-webkit-scrollbar és scrollbar-width/scrollbar-color CSS szabályokat.

Kimenet
Kapcsolódó eszközök
CSS szinnyomás generátorFejlesztői eszközök
CSS szín változó kinyerőFejlesztői eszközök
CSS animáció és átmenet generátorújFejlesztői eszközök
i18n kulcs diffFejlesztői eszközök
TOML-JSON konverterFejlesztői eszközök
SQL-ről JSON-raFejlesztői eszközök
CSS görgetősáv stílus generátor
Az alapértelmezett böngésző-görgetősáv ritkán illeszkedik a tervezéshez, és testreszabásához két különböző specifikációt kell emlékezni: a WebKit ::-webkit-scrollbar pszeudo-elemeket, amelyeket a Chrome, Safari és Edge használ, valamint a szabványos scrollbar-width/scrollbar-color tulajdonságokat, amelyeket a Firefox olvas. Ez az eszköz mindkettőt egyaránt generálja néhány opcióból, így egy CSS-blokk másolásával minden nagyobb böngésző egy megfelelő görgetősávot jelenít meg.
Adjon meg egy cél-szelektort — body az egész oldalhoz, vagy egy osztály, mint a .sidebar egy görgetendő panelhez — majd válassza ki a görgetősáv szélességét képpontban, a sáv és a csúszka színeit, valamint azt a színt, amelyre a csúszka rámegy. A csúszka lekerekítése az húzható sáv border-radius értékét vezérli, a belső szegély pedig egy transzparens rést ad a csúszka és a sáv között, így lebegő pillaként jelenik meg, nem pedig szilárd blokként. A Változat opció a böngésző normál görgetősávja, egy sovány "vékony", valamint a "rejtett" között válthat, amely eltávolítja a görgetősávot az -ms-overflow-style és scrollbar-width: none segítségével, miközben az elem saját görgethető marad érintetlen.
A sötét mód változat bekapcsolása a szabályok egy második másolatát egy @media (prefers-color-scheme: dark) blokkba burkolja, a sáv és a csúszka színei automatikusan elsötétülnek, így egy oldal, amely már váltja a témákat, egy görgetősávot kap, amely vele vált — további számítás nélkül. Minden opció élőben frissíti a kimenetet az alkalmazkodása során, az eredmény alatti összesítés pedig azt jelenti, hogy hány CSS szabályblokkot generáltak és a pontos karakterszám.
Minden helyileg az Ön böngészőjében fut: szelektorok, színek vagy CSS nem kerülnek kiszolgálóra. Másolja az eredményt közvetlenül az Ön stíluslapjába, töltse le .txt fájlként, vagy küldje el egy másik eszköz bemenetére a további finomítás érdekében.
Gyakori kérdések
Miért generálja az eszköz a scrollbar-width és ::-webkit-scrollbar szabályokat is?
Egyetlen CSS tulajdonság sem támogatott mindenhol. A Firefox a szabványos scrollbar-width és scrollbar-color tulajdonságokat olvassa, míg a Chrome, Safari és Edge csak az idősebb ::-webkit-scrollbar sözde-elemekre reagálnak. Mindkettő generálása azt jelenti, hogy ugyanaz a stílus mindenhol működik.
A "Rejtett" változat megakadályozza az elem görgetését?
Nem. Csak a vizuális görgetőcsík és csúszka elrejtésére szolgál a scrollbar-width: none és -ms-overflow-style: none segítségével. Az elem továbbra is normálisan görgethető egy egér kerék, trackpad vagy érintés segítségével — a tartalomnak csak nincs látható görgetőcsíkja.
Mit csinál a csúszka belső szegélye?
Transzparens szegélyt ad a csúszka körül a background-clip: padding-box segítségével, amely befelé zsugorítja a látható kitöltést a sáv széleiből. Ez a rés az, amely miatt egy csúszka kerekített hap kinézetre vonatkozik, nem pedig a görgetőcsík mindkét oldalát érinti.
Hogyan számítódnak ki a sötét mód színei?
Az Ön által beállított minden szín feketébe keveredik egy meghatározott mértékben és egy @media (prefers-color-scheme: dark) blokkba kerül, így egy olyan hely, amely már váltja a témákat, arányosan sötétebb görgetőcsíkot és csúszkát kap, anélkül, hogy kézzel kellene kiválasztania a színek második halmazát.
Az én CSS-em vagy az általam kiválasztott színek valahol fel vannak töltve?
Nem. A görgetősáv CSS teljesen az Ön böngészőjében jön létre — az Ön által beírt vagy kiválasztott semmi nem hagyja el az eszközt.