Selaimen oletusharmaa vierityspalkki toimii kuin ilmaisella verkkosivukoneella tehty käyntikortti: se ajaa asiansa, mutta jättää keskinkertaisen vaikutelman. Se pistää erityisesti silmään, kun koko sivusto on pikselintarkka, fontit on valittu huolella, värit on hiottu ja sitten oikealla on tämä Internet Explorer -aikakaudelta peräisin oleva kulmikas palkki.

Kehittäjät usein välttelevät aihetta. Ei siksi, että se olisi vaikeaa, neljä riviä CSS:ää ratkaisee ongelman. Pikemminkin myytit ovat tiellä: "toimii vain Chromessa", "käyttäjät eivät huomaa", "se on kikka, ei tuotantokelpoinen ominaisuus."

Todellisuudessa W3C-standardi kattaa perusasiat kahdella ominaisuudella, ja WebKitin pseudo-elementit antavat hallinnan jokaiseen yksityiskohtaan pyöristyksistä liukuväreihin. Olen koonnut molemmat lähestymistavat yhdeksi oppaaksi: spesifikaatiosta tuotantovalmiiksi, selainriippumattomaksi koodiksi, jota et häpeä viedä tuotantoon.

💡 Pikaopas:

• Määritä vierityspalkki ominaisuuksilla scrollbar-width ja scrollbar-color: kaksi riviä, täysi selaintuki, ei etuliitteitä.
• Hallitse ::-webkit-scrollbar ja sen jälkeläisiä säätääksesi tarkasti raiteen, tarttujan ja kulmat.
• Rakenna selainriippumaton ratkaisu: standardi Firefoxille, pseudo-elementit Chromelle/Safarille/Edgelle, ei ristiriitoja.
• Tutki yleisiä virheitä: spesifisyys, saavutettavuus, puuttuvat painikkeet, mobiiliselainten sudenkuopat.

Miksi vierityspalkki kannattaa tyylitellä

Ensimmäinen ja tärkein peruste on visuaalinen yhtenäisyys. Kuvittele tumma laskeutumissivu neon-korostuksilla ja kirkkaan valkoinen vierityspalkki oikealla. Tai vaalea minimalistinen sivusto, jossa vierityspalkki on ainoa elementti, joka rikkoo väripaletin. Teknisesti tämä ei ole bugi, mutta se näyttää keskeneräiseltä.

Toinen seikka on brändäys. Värillisestä vierityspalkista tulee osa visuaalista kieltä: vihreä tarttuja terveellisten aterioiden kotiinkuljetuspalvelulle, oranssi varausalustalle. Pieni yksityiskohta, joka vahvistaa mielleyhtymää ilman ylimääräisiä bannereita ja ponnahdusikkunoita.

Kolmanneksi, huomion hallinta. Ohut, puoliläpinäkyvä vierityspalkki ei varasta huomiota sisällöltä. Pitkillä laskeutumissivuilla kapea palkki ei visuaalisesti syö arvokkaita leveyspikseleitä, ja mobiiliasetteluissa, joissa on sivumarginaalit, jokainen pikseli on tärkeä.

Ja avainkohta: tämä ei ole nörttien temppu. Ominaisuudet scrollbar-width ja scrollbar-color ovat osa CSS Scrollbars Styling Module Level 1 -spesifikaatiota, ja kaikki nykyiset selaimet tukevat niitä. Can I Use -sivuston kesäkuun 2026 tietojen mukaan standardiominaisuuksien kattavuus ylittää 95% käyttäjistä, selainetuliitteiden aikakausi vierityspalkeissa on ohi.

Standardi lähestymistapa: scrollbar-width ja scrollbar-color

Yksinkertaisin ja luotettavin menetelmä. Kaksi ominaisuutta ilman etuliitteitä, selkeä syntaksi, toimii Firefoxissa, Chromessa, Edgessä ja Safarissa.

Perussyntaksi

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

Ensimmäinen arvo scrollbar-color-ominaisuudessa on tarttujan väri, toinen on raiteen väri. scrollbar-width-ominaisuus hyväksyy kolme arvoa:

• auto, vakioleveys (noin 17px Windowsissa, 15px macOS:ssä hiirellä);
• thin, ohut vierityspalkki (noin 8px);
• none, piilottaa vierityspalkin kokonaan (vieritys toimii edelleen, mutta käyttäjä ei välttämättä huomaa sisällön vierivän, käytä harkiten).

Esimerkki tummalle teemalle

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

Tulos: tumma raide, joka vastaa taustaväriä, ja harmaa tarttuja. Mikään ei riko väripalettia, kaksi riviä koodia.

Standardin rajoitukset

Spesifikaatio on tarkoituksella minimalistinen: et voi asettaa reunuksen pyöristystä, varjoja, liukuvärejä tai hover-efektejä. Tämä on kompromissi muokkauksen ja käytettävyyden säilyttämisen välillä, liian epästandardi vierityspalkki rikkoo tutun vuorovaikutusmallin. Jos standardivalikoima ei riitä, ota käyttöön WebKitin pseudo-elementit.

Hienosäätö::-webkit-scrollbarin avulla

::-webkit-scrollbar-*-pseudo-elementtien sarja ei ole osa W3C-standardia, mutta WebKit- ja Blink-selaimet tukevat sitä: Chrome, Edge, Safari, Opera, Brave, Arc. Kattavuus Can I Usen tilastojen mukaan käsittää valtaosan työpöytäkäyttäjistä.

Vierityspalkin arkkitehtuuri WebKitissä

Selaimen vierityspalkki koostuu seitsemästä osasta, joilla kullakin on oma pseudo-elementtinsä:

Käytännössä valtaosa tehtävistä ratkaistaan kolmella: scrollbar, track ja thumb. Loput ovat tiettyjä design-ratkaisuja varten.

Esimerkki: siisti vierityspalkki blogiin

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
}

Kuusi pikseliä leveä, läpinäkyvä raide (näkymätön ilman vieritystä), pyöristetty tarttuja, joka tummenee hover-efektillä. Vierityspalkki ei huuda itsestään, mutta näyttää modernilta.

Esimerkki liukuvärillä laskeutumissivulle

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
}

Pystysuora liukuväri tarttujassa, tumma raide, ohut reunus erottamassa taustasta. Kolme lisäriviä perustaan, ja sivu tuntuu erilaiselta.

Vierityspalkin piilottaminen menettämättä vieritystä

Klassinen tekniikka modaali-ikkunoille ja hampurilaisvalikoille:

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

Säiliö pysyy vieritettävänä, mutta palkki katoaa sekä Firefoxissa (scrollbar-width: none) että WebKit-selaimissa (display: none itse ::-webkit-scrollbar-elementissä).

Selainriippumaton ratkaisu

Yhdistä standardi ja pseudo-elementit yhdeksi lohkoksi, kattavuus on lähes täydellinen:

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ärjestyksellä on väliä: ensin standardiominaisuudet, sitten pseudo-elementit. Standardia tukevat selaimet soveltavat scrollbar-color-ominaisuutta ja jättävät ::-webkit-scrollbar-*-elementit huomiotta, kuten spesifikaatio vaatii. Selaimet, jotka eivät tue standardia, käyttävät pseudo-elementtejä. Ristiriitaa ei synny.

Mihin koodi lisätään

Kolme vaihtoehtoa, yksinkertaisesta joustavaan:

• Globaalisti teeman style.css-tiedostoon. Sopii, jos vierityspalkin tyyli on sama koko sivustolla. Haittapuoli: muutokset katoavat teemapäivityksessä.
• Mukauttimen "Lisätyylit"-osioon. Polku: Ulkoasu → Mukauta → Lisätyylit. Turvallinen tapa WordPressille: tyylit elävät teeman asetuksissa eivätkä nollaudu päivityksessä.
• Lisäosan, kuten Code Snippets, kautta. Jos haluat määrittää vierityspalkin tietyille sivuille CSS-luokkien avulla.

Lapsiteemassa tyylit liitetään erillisen tiedoston kautta käyttäen wp_enqueue_scripts-funktiota wp_head-koukulla.

Yleisiä virheitä tyylittelyssä

Unohdettu selainriippumattomuus. Asetat vain ::-webkit-scrollbar-elementin, oletuspalkki jää Firefoxiin. Lisää aina scrollbar-width ja scrollbar-color parina koodissa ylemmäs.

Liian ohut vierityspalkki. 2-3px leveydellä ::-webkit-scrollbar-elementissä tarttujan klikkaamisesta hiirellä tulee motoriikkatehtävä. Erityisen kriittistä kannettavilla ilman ulkoista hiirtä. Mukavuuden vähimmäisleveys on 6px.

Nollakontrasti. Harmaa tarttuja harmaalla raiteella sulautuu yhdeksi möykyksi. Tarttujan ja raiteen välinen vähimmäiskontrasti on 3:1, WCAG 2.1 AA -vaatimus käyttöliittymäelementeille.

Kaikkien pseudo-elementtien ylikirjoittaminen turhaan. Koodi paisuu, vaikutus nolla. Useimmissa tapauksissa scrollbar, track ja thumb riittävät. Koske painikkeisiin (button) ja kulmaan (corner) vain, jos design todella vaatii sitä.

Tyylien vuotaminen koko body-elementtiin. Asettaminen *- tai html-valitsimelle ilman rajoituksia tyylittää myös sisäiset vierityspalkit: tekstikentät, koodilohkot, pudotusvalikot. Koodin esikatseluille tämä on melkein aina tarpeetonta. Käytä luokkavalitsimia: .custom-scrollbar-area::-webkit-scrollbar.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko vierityspalkin tyylittely mobiililaitteilla?

Ei, mobiiliselaimissa vierityspalkkia ei näytetä staattisesti, se ilmestyy vain vierityksen aikana ja on käyttöjärjestelmän hallinnassa. CSS-tyylittely ei päde iOS:llä ja Androidilla. Mutta tämä ei ole ongelma: mobiilissa vierityspalkki ei ole pysyvä käyttöliittymäelementti. Varmistettu iOS 18 Safarilla ja Android 15 Chromella, mukautetut tyylit ohitetaan, käytetään järjestelmän ilmaisinta. Tableteilla, joissa on ulkoinen näppäimistö, vierityspalkki saattaa näkyä pysyvästi, ja tyylit toimivat.

Miten vaakasuuntainen vierityspalkki tyylitellään erillään pystysuorasta?

Pseudo-elementtien kautta, joissa on suuntaetuliite: ::-webkit-scrollbar-horizontal ja ::-webkit-scrollbar-vertical. Käytännössä niitä käytetään harvoin, tuki on heikompi kuin pää-pseudo-elementeillä. Luotettavampaa on liittää tyylit tiettyyn säiliöön, jossa on tarvittava vieritystyyppi, luokkavalitsimen avulla. Vaakasuoraan vieritykseen koodilohkon sisällä: .code-block::-webkit-scrollbar { height: 4px; } asettaa vaakavierityspalkin korkeuden, ja .code-block::-webkit-scrollbar-thumb { background: #666; } tyylittää tarttujan. Standardit scrollbar-width ja scrollbar-color toimivat samoin molempiin suuntiin.

Voiko vierityspalkkia animoida hover-efektillä?

Kyllä, transition-ominaisuudella ::-webkit-scrollbar-thumb-elementissä. Mutta transition-tuki pseudo-elementeissä on puutteellinen: Chrome ja Edge toimivat, Safari saattaa temppuilla. Siksi useammin käytetään värinvaihtoa :hover-tilan kautta ilman animaatiota, se on luotettavampaa ja näyttää siistiltä. Toimiva variantti: ::-webkit-scrollbar-thumb { transition: background 0.2s ease; } vaihtaa tarttujan värin pehmeästi. Älä käytä transitionia width-ominaisuuteen: vierityspalkin leveyden muuttaminen hover-efektillä siirtää sisältöä ja ärsyttää.

Miten vierityspalkki tyylitellään tietyn lohkon sisällä, ei koko sivulla?

Käytä yhdistelmävalitsinta: .sidebar::-webkit-scrollbar { width: 5px; }, .sidebar::-webkit-scrollbar-thumb { background: #aaa; }. Standardiominaisuuksille: .sidebar { scrollbar-width: thin; scrollbar-color: #aaa transparent; }. Toimii mille tahansa säiliölle, jolla on overflow-y: auto tai overflow-y: scroll. Älä käytä *-valitsinta vierityspalkille, se vaikuttaa tekstikenttiin ja pudotusvalikoihin.

Onko pakollista kahdentaa tyylit ::-webkit-scrollbar-elementille ja standardiominaisuuksille?

Kyllä, jos selainriippumattomuutta tarvitaan. Firefox käyttää vain scrollbar-width- ja scrollbar-color-ominaisuuksia jättäen pseudo-elementit huomiotta. Chrome ja Edge versiosta 121 alkaen tukevat molempia mekanismeja, mutta soveltavat standardiominaisuuksia prioriteetilla, pseudo-elementit niissä toimivat varasuunnitelmana vanhemmille versioille. Neljä riviä koodia (kaksi standardille, kaksi WebKitille) kattaa kaikki selaimet ilman ristiriitoja.

Kannattaako vierityspalkki tyylitellä vuonna 2026

Ehdottomasti kyllä, jos rakennat julkista sivustoa. Kaksi riviä standardia CSS:ää antaa sinulle siistin vierityspalkin, joka ei riko designia eikä vaadi polyfillejä. Laskeutumissivuille ja brändätyille projekteille WebKitin pseudo-elementit tuovat yksilöllisyyttä suorituskyvystä tinkimättä.

Pääsääntö on, älä liioittele. Vierityspalkki pysyy toiminnallisena käyttöliittymäelementtinä, ei kokeilujen kankaana. Vähimmäisleveys 6px, kontrasti vähintään 3:1, ei leveysanimaatioita, ja käyttäjä ei edes huomaa vierityspalkin olevan tyylitelty. Ja juuri se on hyvän työn merkki.

Jos sivusto on WordPressissä, heitä koodi mukauttimen lisätyyleihin, siihen menee minuutti. Tulos säilyy teemapäivitysten yli ja ilahduttaa jokaista, joka vierittää sivun loppuun.