Standardgrå webbläsarscrollbar fungerar som ett visitkort gjort i en gratis webbplatsbyggare: det gör jobbet, men lämnar ett mediokert intryck. Det märks särskilt när hela sajten är pixelperfekt, typsnitten är omsorgsfullt valda, färgerna är polerade, och så sticker den här kantiga listen från Internet Explorer-eran ut på högerkanten.

Utvecklare undviker ofta ämnet. Inte för att det är svårt, fyra rader CSS löser problemet. Snarare kommer myter i vägen: "fungerar bara i Chrome", "användarna märker det inte", "det är en gimmick, inte en produktionsfiness".

I verkligheten täcker W3C-standarden grunderna med två egenskaper, och WebKits pseudoelement ger dig kontroll över varje detalj, från rundning till gradienter. Jag har sammanställt båda tillvägagångssätten i en handledning: från specifikation till produktionsredo kod för flera webbläsare som du inte skäms för att driftsätta.

💡 Snabb översikt:

• Konfigurera scrollbaren med scrollbar-width och scrollbar-color: två rader, full kompatibilitet över webbläsare, inga prefix.
• Bemästra ::-webkit-scrollbar och dess underordnade för detaljerad kontroll över spår, rullningslist och hörn.
• Bygg en lösning för flera webbläsare: standarden för Firefox, pseudoelement för Chrome/Safari/Edge, inga konflikter.
• Granska vanliga misstag: specificitet, tillgänglighet, saknade knappar, fallgropar i mobila webbläsare.

Varför styla scrollbaren

Det första och främsta argumentet är visuell sammanhållning. Föreställ dig en mörk landningssida med neonaccenter och en lysande vit scrollbar till höger. Eller en ljus minimalistisk sajt där scrollbaren är det enda elementet som bryter färgpaletten. Tekniskt sett ingen bugg, men det ser ofärdigt ut.

Den andra poängen är varumärkesbyggande. En färgad scrollbar blir en del av det visuella språket: en grön rullningslist för en tjänst som levererar hälsosam mat, orange för en bokningsplattform. En liten detalj som förstärker associationen utan extra banners och popups.

För det tredje, uppmärksamhetsstyrning. En tunn, halvtransparent scrollbar stjäl inte fokus från innehållet. På långa landningssidor äter en smal list inte upp värdefulla pixlar i bredd visuellt, och i mobila layouter med sidmarginaler räknas varje pixel.

Och huvudpoängen: det här är inget trick för nördar. Egenskaperna scrollbar-width och scrollbar-color är en del av specifikationen CSS Scrollbars Styling Module Level 1 och stöds av alla aktuella webbläsare. Enligt data från Can I Use från juni 2026 överstiger täckningen för standardegenskaperna 95% av användarna, eran med leverantörsprefix för scrollbars är över.

Standardmetod: scrollbar-width och scrollbar-color

Den enklaste och mest pålitliga metoden. Två egenskaper utan prefix, tydlig syntax, fungerar i Firefox, Chrome, Edge och Safari.

Grundläggande syntax

1
body {
2
  scrollbar-width: thin;
3
  scrollbar-color: #4a90d9 #f0f0f0;
4
}

Det första värdet i scrollbar-color är rullningslistens färg, det andra är spårets färg. Egenskapen scrollbar-width accepterar tre värden:

• auto, standardbredd (cirka 17 px på Windows, 15 px på macOS med mus);
• thin, tunn scrollbar (cirka 8 px);
• none, dölj scrollbaren helt (skrollning fungerar fortfarande, men användaren kanske inte inser att innehållet går att skrolla, använd med försiktighet).

Exempel för mörkt tema

1
html {
2
  scrollbar-width: thin;
3
  scrollbar-color: #555 #1e1e1e;
4
}

Resultat: ett mörkt spår som matchar bakgrundsfärgen och en grå rullningslist. Inget bryter paletten, två rader kod.

Standardens begränsningar

Specifikationen är avsiktligt minimalistisk: du kan inte ange border-radius, skuggor, gradienter eller hover-effekter. Detta är en kompromiss mellan anpassning och att bevara användbarheten, en alltför icke-standard scrollbar bryter den invanda interaktionsmodellen. Om standarduppsättningen inte räcker till, koppla in WebKits pseudoelement.

Finjustering via::-webkit-scrollbar

Uppsättningen pseudoelement ::-webkit-scrollbar-* är inte en del av W3C-standarden, men stöds av webbläsare med WebKit och Blink: Chrome, Edge, Safari, Opera, Brave, Arc. Täckningen, enligt Can I Use-statistik, omfattar den stora majoriteten av skrivbordsanvändare.

Scrollbarens arkitektur i WebKit

En webbläsarscrollbar består av sju delar, var och en med sitt eget pseudoelement:

I praktiken löses de allra flesta uppgifter med tre: scrollbar, track och thumb. Resten är för specifika designlösningar.

Exempel: prydlig scrollbar för en blogg

1
::-webkit-scrollbar {
2
  width: 6px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: transparent;
7
}
8
 
9
::-webkit-scrollbar-thumb {
10
  background: #c1c1c1;
11
  border-radius: 3px;
12
}
13
 
14
::-webkit-scrollbar-thumb:hover {
15
  background: #a0a0a0;
16
}

Sex pixlar bred, transparent spår (osynligt utan skrollning), rundad rullningslist med mörkare ton vid hover. Scrollbaren skriker inte ut sin närvaro, men ser modern ut.

Exempel med gradient för en landningssida

1
::-webkit-scrollbar {
2
  width: 8px;
3
}
4
 
5
::-webkit-scrollbar-track {
6
  background: #1a1a2e;
7
  border-radius: 4px;
8
}
9
 
10
::-webkit-scrollbar-thumb {
11
  background: linear-gradient(180deg, #e94560, #0f3460);
12
  border-radius: 4px;
13
  border: 1px solid #16213e;
14
}
15
 
16
::-webkit-scrollbar-thumb:hover {
17
  background: linear-gradient(180deg, #ff6b81, #1a508b);
18
}

Vertikal gradient på rullningslisten, mörkt spår, tunn kantlinje för att avgränsa mot bakgrunden. Tre extra rader till grunden, sidan känns annorlunda.

Dölja scrollbaren utan att förlora skrollfunktion

Klassisk teknik för modalfönster och burgarmeny:

1
.hide-scrollbar {
2
  overflow-y: scroll;
3
  scrollbar-width: none;
4
}
5
 
6
.hide-scrollbar::-webkit-scrollbar {
7
  display: none;
8
}

Behållaren förblir skrollbar, men listen försvinner både i Firefox (scrollbar-width: none) och i WebKit-webbläsare (display: none på själva ::-webkit-scrollbar).

Lösning för flera webbläsare

Kombinera standarden och pseudoelementen i ett block, täckningen blir nästan komplett:

1
/* W3C standard — Firefox, modern Chrome/Edge/Safari */
2
html {
3
  scrollbar-width: thin;
4
  scrollbar-color: #888 #f1f1f1;
5
}
6
 
7
/* WebKit pseudo-elements — detailed styling for Chrome/Safari/Edge */
8
::-webkit-scrollbar {
9
  width: 8px;
10
}
11
 
12
::-webkit-scrollbar-track {
13
  background: #f1f1f1;
14
  border-radius: 4px;
15
}
16
 
17
::-webkit-scrollbar-thumb {
18
  background: #888;
19
  border-radius: 4px;
20
}
21
 
22
::-webkit-scrollbar-thumb:hover {
23
  background: #555;
24
}

Ordningen spelar roll: standardegenskaper först, sedan pseudoelement. Webbläsare med standardstöd tillämpar scrollbar-color och ignorerar ::-webkit-scrollbar-*, enligt specifikationens krav. Webbläsare utan standardstöd använder pseudoelement. Ingen konflikt uppstår.

Var koden ska infogas

Tre alternativ, från enkelt till flexibelt:

• Globalt i temats style.css. Passar om scrollbar-stilen är densamma för hela sajten. Nackdel: ändringar försvinner vid temauppdatering.
• I avsnittet "Ytterligare stilar" i anpassaren. Sökväg: Utseende → Anpassa → Ytterligare stilar. Säkert sätt för WordPress: stilar lever i temainställningarna och nollställs inte vid uppdatering.
• Via ett tillägg som Code Snippets. Om du behöver specifikt ställa in scrollbar för vissa sidor via CSS-klasser.

I ett barntema kopplas stilar in via en separat fil genom wp_enqueue_scripts med hooken wp_head.

Vanliga misstag vid styling

Glömd kompatibilitet över webbläsare. Sätt bara ::-webkit-scrollbar, standardlisten finns kvar i Firefox. Lägg alltid till scrollbar-width och scrollbar-color som ett par ovanför i koden.

Scrollbar för tunn. Vid 2-3 px bredd i ::-webkit-scrollbar blir det en motorisk utmaning att klicka på rullningslisten med musen. Särskilt kritiskt på bärbara datorer utan extern mus. Minsta bekväma bredd är 6 px.

Noll kontrast. Grå rullningslist på grått spår smälter ihop till en klump. Minsta färgkontrast mellan rullningslist och spår är 3:1, ett krav enligt WCAG 2.1 AA för gränssnittselement.

Åsidosätta alla pseudoelement i onödan. Koden sväller, noll effekt. I de flesta fall räcker scrollbar, track och thumb. Rör knappar (button) och hörn (corner) endast om designen verkligen kräver det.

Stilläckage till hela body. Att sätta på * eller html utan begränsningar stylar även interna scrollbars: textfält, kodblock, rullgardinslistor. För kodförhandsvisningar är detta nästan alltid onödigt. Använd klass-selektorer: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Vanliga frågor

Fungerar scrollbar-styling på mobila enheter?

Nej, i mobila webbläsare visas scrollbaren inte statiskt, den syns bara under skrollning och styrs av operativsystemet. CSS-styling tillämpas inte på iOS och Android. Men detta är inget problem: på mobilen är scrollbaren inte ett permanent gränssnittselement. Verifierat på iOS 18 Safari och Android 15 Chrome, anpassade stilar ignoreras, systemindikatorn används. På surfplattor med externt tangentbord kan scrollbaren visas permanent, och stilar fungerar.

Hur stylar man horisontell scrollbar separat från vertikal?

Via pseudoelement med riktningsprefix: ::-webkit-scrollbar-horizontal och ::-webkit-scrollbar-vertical. I praktiken används de sällan, stödet är sämre än för huvudpseudoelementen. Mer pålitligt att fästa stilar vid en specifik behållare med den önskade skrolltypen via en klass-selektor. För horisontell skrollning inuti ett kodblock: .code-block::-webkit-scrollbar { height: 4px; } sätter den horisontella scrollbarens höjd, och .code-block::-webkit-scrollbar-thumb { background: #666; } stylar rullningslisten. Standardegenskaperna scrollbar-width och scrollbar-color fungerar likadant för båda riktningarna.

Kan man animera scrollbaren vid hover?

Ja, via transition på ::-webkit-scrollbar-thumb. Men stödet för transition på pseudoelement är ofullständigt: Chrome och Edge fungerar, Safari kan strula. Så oftare använder man färgändring via :hover utan animering, mer pålitligt och ser rent ut. Fungerande variant: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } ändrar smidigt rullningslistens färg. Använd inte transition på width: att ändra scrollbar-bredd vid hover förskjuter innehåll och irriterar.

Hur stylar man scrollbar inuti ett specifikt block, inte hela sidan?

Använd en sammansatt selektor: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. För standardegenskaper: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Fungerar för alla behållare med overflow-y: auto eller overflow-y: scroll. Använd inte *-selektorn för scrollbar, den påverkar textfält och rullgardinslistor.

Är det obligatoriskt att duplicera stilar för ::-webkit-scrollbar och standardegenskaper?

Ja, om kompatibilitet över webbläsare behövs. Firefox använder bara scrollbar-width och scrollbar-color, och ignorerar pseudoelement. Chrome och Edge från version 121 stöder båda mekanismerna, men tillämpar standardegenskaper med prioritet, pseudoelement i dem fungerar som fallback för äldre versioner. Fyra rader kod (två för standard, två för WebKit) täcker alla webbläsare utan konflikter.

Är det värt att styla scrollbaren 2026

Definitivt ja, om du bygger en publik sajt. Två rader standard-CSS ger dig en prydlig scrollbar som inte förstör designen och inte kräver polyfills. För landningssidor och varumärkesprojekt ger WebKits pseudoelement individualitet utan att skada prestandan.

Huvudregeln är att inte överdriva. Scrollbaren förblir ett funktionellt gränssnittselement, inte en duk för experiment. Minsta bredd 6 px, kontrast inte lägre än 3:1, inga breddanimationer, och användaren kommer inte ens att märka att scrollbaren är stylad. Och det är just tecknet på ett bra arbete.

Om sajten är på WordPress, släng in koden i anpassarens ytterligare stilar, det tar en minut. Resultatet stannar kvar genom temauppdateringar och gläder ögat hos alla som skrollar sidan till slutet.