Vaikimisi hall brauseri kerimisriba toimib nagu tasuta veebilehe ehitajas tehtud visiitkaart: ajab asja ära, aga jätab keskpärase mulje. See on eriti märgatav, kui kogu sait on pikslitäpne, fondid hoolikalt valitud, värvid viimistletud ja siis on paremal see nurgeline riba, mis paistab Internet Exploreri ajastust.

Arendajad väldivad seda teemat sageli. Mitte sellepärast, et see oleks keeruline, neli rida CSS-i lahendab probleemi. Pigem segavad müüdid: „töötab ainult Chrome'is", „kasutajad ei märka", „see on trikk, mitte tootmiskõlbulik funktsioon".

Tegelikkuses katab W3C standard põhitõed kahe atribuudiga ja WebKiti pseudoelemendid annavad kontrolli iga detaili üle, alates ümardamisest kuni gradientideni. Olen koondanud mõlemad lähenemised ühte õpetusse: spetsifikatsioonist tootmisvalmis brauseriülese koodini, mida ei ole piinlik tootmisse panna.

💡 Kiire ülevaade:

• Seadista kerimisriba, kasutades scrollbar-width ja scrollbar-color: kaks rida, täielik brauseriülene ühilduvus, ilma eesliideteta.
• Valda ::-webkit-scrollbar ja selle järglasi, et saavutada peeneteraline kontroll raja, pöidla ja nurkade üle.
• Ehita brauseriülene lahendus: standard Firefoxile, pseudoelemendid Chrome'ile/Safarile/Edge'ile, konfliktideta.
• Uuri levinud vigu: spetsiifilisus, ligipääsetavus, puuduvad nupud, mobiilibrauserite lõksud.

Miks kerimisriba kujundada

Esimene ja peamine argument on visuaalne sidusus. Kujutle tumedat maandumislehte neoonaktsentidega ja erevalget kerimisriba paremal. Või heledat minimalistlikku saiti, kus kerimisriba on ainus element, mis värvipaletti lõhub. Tehniliselt pole see viga, kuid näeb välja poolik.

Teine punkt on bränding. Värviline kerimisriba muutub visuaalse keele osaks: roheline pöial tervisliku toidu kohaletoimetamise teenusele, oranž broneerimisplatvormile. Väike detail, mis tugevdab seost ilma täiendavate bännerite ja hüpikakendeta.

Kolmandaks, tähelepanu juhtimine. Õhuke poolläbipaistev kerimisriba ei varasta sisult fookust. Pikkadel maandumislehtedel ei söö kitsas riba visuaalselt väärtuslikke laiusepiksleid ja mobiilipaigutustes, kus on külgmised veerised, loeb iga piksel.

Ja võtmepunkt: see ei ole trikk friikidele. Atribuudid scrollbar-width ja scrollbar-color on osa CSS Scrollbars Styling Module Level 1 spetsifikatsioonist ja neid toetavad kõik praegused brauserid. Can I Use 2026. aasta juuni andmete kohaselt ületab standardsete atribuutide katvus 95% kasutajatest, brauseri eesliidete ajastu kerimisribade jaoks on läbi.

Standardne lähenemine: scrollbar-width ja scrollbar-color

Lihtsaim ja usaldusväärseim meetod. Kaks atribuuti ilma eesliideteta, selge süntaks, töötab Firefoxis, Chrome'is, Edge'is ja Safaris.

Põhisüntaks

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

Esimene väärtus scrollbar-color puhul on pöidla värv, teine on raja värv. Atribuut scrollbar-width aktsepteerib kolme väärtust:

• auto, standardlaius (umbes 17px Windowsis, 15px macOS-is hiirega);
• thin, õhuke kerimisriba (umbes 8px);
• none, peida kerimisriba täielikult (kerimine töötab endiselt, kuid kasutaja ei pruugi aru saada, et sisu kerib, kasuta ettevaatlikult).

Näide tumeda teema jaoks

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

Tulemus: tume rada, mis sobib taustavärviga, ja hall pöial. Miski ei lõhu paletti, kaks koodirida.

Standardi piirangud

Spetsifikatsioon on tahtlikult minimalistlik: te ei saa määrata äärise raadiust, varje, gradiente ega hõljumisefekte. See on kompromiss kohandamise ja kasutatavuse säilitamise vahel, liiga ebastandardne kerimisriba lõhub tuttava interaktsioonimudeli. Kui standardkomplektist ei piisa, ühenda WebKiti pseudoelemendid.

Peenhäälestus läbi::-webkit-scrollbar

Pseudoelementide komplekt ::-webkit-scrollbar-* ei ole W3C standardi osa, kuid seda toetavad WebKiti ja Blinki brauserid: Chrome, Edge, Safari, Opera, Brave, Arc. Katvus, vastavalt Can I Use statistikale, hõlmab valdavat enamust lauaarvutikasutajatest.

Kerimisriba arhitektuur WebKitis

Brauseri kerimisriba koosneb seitsmest osast, igaühel oma pseudoelement:

Praktikas lahendatakse valdav enamus ülesandeid kolmega: scrollbar, track ja thumb. Ülejäänud on spetsiifiliste disainilahenduste jaoks.

Näide: korralik kerimisriba blogile

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
}

Kuus pikslit lai, läbipaistev rada (kerimata nähtamatu), ümardatud pöial tumenemisega hõljumisel. Kerimisriba ei karju enda olemasolust, kuid näeb välja kaasaegne.

Näide gradiendiga maandumislehe jaoks

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
}

Vertikaalne gradient pöidlal, tume rada, õhuke ääris taustast eraldamiseks. Kolm lisarida baasile, leht tundub teistsugune.

Kerimisriba peitmine kerimisvõimet kaotamata

Klassikaline tehnika modaalakende ja burgerimenüüde jaoks:

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

Konteiner jääb keritavaks, kuid riba kaob nii Firefoxis (scrollbar-width: none) kui ka WebKiti brauserites (display: none ::-webkit-scrollbar enda peal).

Brauseriülene lahendus

Kombineeri standard ja pseudoelemendid üheks plokiks, katvus on peaaegu täielik:

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
}

Järjekord loeb: kõigepealt standardsed atribuudid, seejärel pseudoelemendid. Standardit toetavad brauserid rakendavad scrollbar-color ja ignoreerivad ::-webkit-scrollbar-*, nagu spetsifikatsioon nõuab. Ilma standarditoeta brauserid kasutavad pseudoelemente. Konflikti ei teki.

Kuhu kood sisestada

Kolm võimalust, lihtsast paindlikuni:

• Globaalselt teema failis style.css. Sobib, kui kerimisriba stiil on kogu saidi jaoks sama. Miinus: muudatused lähevad teema uuendamisel kaotsi.
• Kohandaja jaotises „Lisastiilid". Teekond: Välimus → Kohanda → Lisastiilid. Ohutu meetod WordPressi jaoks: stiilid elavad teema seadetes ega lähtestu uuendamisel.
• Pistprogrammi kaudu nagu Code Snippets. Kui on vaja määrata kerimisriba konkreetsetele lehtedele CSS-klasside kaudu.

Laps-teemas ühendatakse stiilid eraldi faili kaudu, kasutades wp_enqueue_scripts koos wp_head konksuga.

Levinud vead kujundamisel

Unustatud brauseriülene ühilduvus. Määratakse ainult ::-webkit-scrollbar, Firefoxi jääb vaikimisi riba. Lisa alati scrollbar-width ja scrollbar-color paarina koodis ülalpool.

Kerimisriba liiga õhuke. 2-3px laiuse ::-webkit-scrollbar puhul muutub pöidlale hiirega klõpsamine motoorika ülesandeks. Eriti kriitiline sülearvutitel ilma välise hiireta. Minimaalne mugav laius on 6px.

Null kontrasti. Hall pöial hallil rajal sulandub üheks laiguks. Minimaalne värvikontrast pöidla ja raja vahel on 3:1, WCAG 2.1 AA nõue liidese elementidele.

Kõigi pseudoelementide asjatu ülekirjutamine. Kood paisub, efekt null. Enamikul juhtudel piisab scrollbar, track ja thumb elementidest. Puuduta nuppe (button) ja nurka (corner) ainult siis, kui disain seda tõesti nõuab.

Stiili lekkimine tervele kehale. * või html peale piiranguteta määramine kujundab ka sisemised kerimisribad: tekstiväljad, koodiplokid, ripploendid. Koodi eelvaadete jaoks on see peaaegu alati ebavajalik. Kasuta klassiselektoreid: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Korduma kippuvad küsimused

Kas kerimisriba kujundamine töötab mobiilseadmetes?

Ei, mobiilibrauserites ei kuvata kerimisriba staatiliselt, see ilmub ainult kerimise ajal ja seda juhib operatsioonisüsteem. CSS-i kujundus ei rakendu iOS-is ja Androidis. Kuid see ei ole probleem: mobiilis ei ole kerimisriba püsiv liidese element. Kontrollitud iOS 18 Safari ja Android 15 Chrome'iga, kohandatud stiile ignoreeritakse, kasutatakse süsteemi indikaatorit. Tahvelarvutitel välise klaviatuuriga võib kerimisriba kuvada püsivalt ja stiilid töötavad.

Kuidas kujundada horisontaalset kerimisriba vertikaalsest eraldi?

Pseudoelementide kaudu suuna eesliitega: ::-webkit-scrollbar-horizontal ja ::-webkit-scrollbar-vertical. Praktikas kasutatakse neid harva, tugi on kehvem kui peamistel pseudoelementidel. Usaldusväärsem on kinnitada stiilid konkreetsele konteinerile koos vajaliku kerimistüübiga klassiselektori kaudu. Horisontaalse kerimise jaoks koodiploki sees: .code-block::-webkit-scrollbar { height: 4px; } määrab horisontaalse kerimisriba kõrguse ja .code-block::-webkit-scrollbar-thumb { background: #666; } kujundab pöidla. Standardsed scrollbar-width ja scrollbar-color töötavad mõlema suuna puhul samamoodi.

Kas kerimisriba saab hõljumisel animeerida?

Jah, läbi transition atribuudi ::-webkit-scrollbar-thumb peal. Kuid ülemineku tugi pseudoelementidel on puudulik: Chrome ja Edge töötavad, Safari võib tõrkuda. Seega kasutatakse sagedamini värvimuutust läbi :hover ilma animatsioonita, see on usaldusväärsem ja näeb puhas välja. Töötav variant: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } muudab sujuvalt pöidla värvi. Ära rakenda üleminekut width atribuudile: kerimisriba laiuse muutmine hõljumisel nihutab sisu ja ärritab.

Kuidas kujundada kerimisriba konkreetse ploki sees, mitte tervel lehel?

Kasuta liitselektorit: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Standardsete atribuutide jaoks: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Töötab iga konteineri puhul, millel on overflow-y: auto või overflow-y: scroll. Ära kasuta * selektorit kerimisriba jaoks, see mõjutab tekstivälju ja ripploendeid.

Kas stiile on kohustuslik dubleerida ::-webkit-scrollbar ja standardsete atribuutide jaoks?

Jah, kui on vaja brauseriülest ühilduvust. Firefox kasutab ainult scrollbar-width ja scrollbar-color, ignoreerides pseudoelemente. Chrome ja Edge alates versioonist 121 toetavad mõlemat mehhanismi, kuid rakendavad standardseid atribuute prioriteediga, pseudoelemendid töötavad neis varuvariandina vanemate versioonide jaoks. Neli koodirida (kaks standardile, kaks WebKitile) katavad kõik brauserid konfliktideta.

Kas kerimisriba tasub 2026. aastal kujundada

Kindlasti jah, kui ehitate avalikku saiti. Kaks rida standardset CSS-i annavad korraliku kerimisriba, mis ei lõhu disaini ega vaja polüfille. Maandumislehtede ja brändiprojektide jaoks lisavad WebKiti pseudoelemendid individuaalsust, kahjustamata jõudlust.

Peamine reegel on mitte üle pingutada. Kerimisriba jääb funktsionaalseks liidese elemendiks, mitte lõuendiks eksperimentideks. Minimaalne laius 6px, kontrast mitte alla 3:1, ilma laiuse animatsioonideta ja kasutaja ei märkagi, et kerimisriba on kujundatud. Ja see on just hea töö tunnus.

Kui sait on WordPressis, viska kood kohandaja lisastiilidesse, see võtab minuti. Tulemus jääb püsima läbi teemauuenduste ja rõõmustab silma kõigil, kes lehe lõpuni kerivad.