Hoppa till innehåll
TextArray1.87.0
100% lokalt

CSS scrollbar-stilgenerator

Skapa anpassade scrollbar-stilar med ::-webkit-scrollbar och scrollbar-width/scrollbar-color CSS-regler för Chrome, Safari, Firefox och Edge.

Utmatning
Relaterade verktyg
CSS box-shadow-generatorUtvecklarverktyg
CSS-färgvariabel-extraktorUtvecklarverktyg
CSS easing- och övergångsgeneratornyUtvecklarverktyg
i18n nyckel diffUtvecklarverktyg
TOML till JSON-omvandlareUtvecklarverktyg
SQL till JSONUtvecklarverktyg
CSS scrollbar-stilgenerator
Standardwebbläsarens scrollbalk matchar sällan resten av en design, och att forma en scrollbalk innebär att komma ihåg två olika specifikationer samtidigt: WebKit ::-webkit-scrollbar pseudo-elementen som Chrome, Safari och Edge använder, och de vanliga scrollbar-width/scrollbar-color-egenskaperna som Firefox läser i stället. Det här verktyget genererar båda åt gången från ett litet antal alternativ, så du kopierar ett CSS-block och varje större webbläsare renderar en matchande scrollbalk.
Sätt en målväljare – body för hela sidan, eller en klass som .sidebar för en scrollbar panel – och välj sedan scrollbalkens bredd i pixlar, spårs- och tumfärgerna, och färgen som tummen byter till vid hover. Tumme rundning styr border-radius för den dragbara stapeln, och den inre kanten lägger till ett transparent gap mellan tummen och spåret så att det ser ut som en flytande pil i stället för ett fast block. Variant-alternativet byter mellan webbläsarens normala scrollbalk, en smalare "Tunn" och "Dold", vilket tar bort scrollbalken helt med -ms-overflow-style och scrollbar-width: none medan elementets egen scrollning lämnas orörd.
När du slår på mörkläge-varianten slås en andra kopia av reglerna in i ett @media (prefers-color-scheme: dark) block, med spårs- och tumfärgerna automatiskt mörkade så att en webbplats som redan växlar teman får en scrollbalk som växlar med den – ingen separat beräkning behövs. Varje alternativ uppdaterar utdatan live när du justerar det, och totalen under resultatet rapporterar hur många CSS-regelblock som genererades och det exakta antalet tecken.
Allt körs lokalt i din webbläsare: ingen väljare, färg eller CSS skickas någonsin till en server. Kopiera resultatet direkt till din formatmall, ladda ned det som en .txt-fil, eller skicka det till ett annat verktys inmatning för att fortsätta att förfina det.
FAQ
Varför genererar verktyget både scrollbar-width och ::-webkit-scrollbar-regler?
Ingen enskild CSS-egenskap stöds överallt. Firefox läser de vanliga scrollbar-width och scrollbar-color egenskaperna, medan Chrome, Safari och Edge bara svarar på de äldre ::-webkit-scrollbar pseudo-elementen. Att generera båda innebär att samma formatmall fungerar i alla webbläsare.
Stoppar varianten "Dold" elementets scrollning?
Nej. Det döljer bara den visuella scrollbalken och tummen med scrollbar-width: none och -ms-overflow-style: none. Elementet scrollas normalt med en mus, trackpad eller touch – innehållet har bara ingen synlig scrollbalk.
Vad gör tummen inre kant faktiskt?
Det lägger till en transparent kant runt tummen med background-clip: padding-box, vilket krymper den synliga fyllningen inåt från spårkanterna. Det gapet är det som gör att en tumme ser ut som en rundad pil snarare än en stapel som rör båda sidorna av scrollbalken.
Hur beräknas färgerna för mörkläget?
Varje färg du ställer in blandas mot svart med ett fast belopp och placeras i ett @media (prefers-color-scheme: dark) block, så en webbplats med automatisk mörkläge får en proportionellt mörkare spår och tumme utan att du behöver välja en andra uppsättning färger för hand.
Uppladdas min CSS eller valda färger någonstans?
Nej. Scrollbar CSS genereras helt i din webbläsare – ingenting du skriver eller väljer lämnar någonsin din enhet.