Kuinka muokata vierityspalkin väriä ja tyyliä

Vierityspalkin muokkaus CSS:llä

CSS on kieli, jota käytetään verkkosivujen ulkoasun ja suunnittelun määrittämiseen. Vierityspalkin tyylin muokkaaminen CSS:llä tehdään pseudo-elementtien avulla.

Nämä pseudo-elementit toimivat useimmissa modernissa selaimissa, kuten Chrome, Edge ja Safari, mutta eivät Firefoxissa.

Vaihe 1: Valitse vierityspalkin osa

Aluksi, sinun tulee valita, mitä osaa vierityspalkista haluat muokata. Voit määrittää CSS-tyylit seuraaville osille:

• ::webkit-scrollbar: Vierityspalkki.
• ::webkit-scrollbar-button: Vierityspalkin napit (ylös ja alas).
• ::webkit-scrollbar-thumb: Vierityspalkin liikuteltava osa.
• ::webkit-scrollbar-track: Vierityspalkin rata, jossa liikuteltava osa liikkuu.
• ::webkit-scrollbar-corner: Kulma, jossa horisontaalinen ja vertikaalinen vierityspalkki kohtaavat.

Vaihe 2: Määritä tyylisäännöt

Seuraavaksi, voit määrittää tyylisäännöt valitulle osalle.

Vierityspalkin leveys

Jos haluat muuttaa koko vierityspalkin leveyttä voit tehdä sen seuraavasti:

::webkit-scrollbar {
    width: 10px;
}Kopioi koodi

Tässä esimerkissä, vierityspalkki on 10 pikseliä leveä.

Vierityspalkin väri

Jos haluat muuttaa vierityspalkin radan ja liikuteltavan osan väriä, voit tehdä sen seuraavasti:

::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
::webkit-scrollbar-thumb {
    background-color: #F90;
}
::webkit-scrollbar-thumb:hover {
    background-color: #AA00FF;
}Kopioi koodi

Tässä esimerkissä vierityspalkin radan taustaväri on vaaleanharmaa (#F5F5F5) ja kahvan taustaväri on oranssi (#F90). Kun kursorin vie kahvan päälle taustaväri vaihtuu violetiksi (#AA00FF).

Vierityspalkin kahvan kulmien kaarevuus

Vierityspalkin kahvan kulmien kaarevuutta voit muuttaa CSS border-radius -ominaisuudella:

::webkit-scrollbar-thumb {
    border-radius: 5px;
}Kopioi koodi

Tässä esimerkissä kahvan kulmien kaarevuus 5 pikseliä.

Vaihe 3: Vierityspalkin tyylit tietylle elementille

Pseudo-elementtejä voi käyttää ilman liitettyä CSS-luokkaa jolloin tyylit vaikuttavat kaikkiin vierityspalkkeihin sivustolla.

CSS-luokan lisäämällä voit rajata tyylit tietyille elementeille tällä tavalla:

.tietyt-elementit::webkit-scrollbar {
    width: 10px;
}
.tietyt-elementit::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}
.tietyt-elementit::webkit-scrollbar-thumb {
    background-color: #F90;
    border-radius: 5px;
}
.tietyt-elementit::webkit-scrollbar-thumb:hover {
    background-color: #AA00FF;
}Kopioi koodi

Vaihe 4: Lisää tyylit kotisivuille

Voit lisätä vierityspalkin CSS-tyylin WordPressin Mukauta ➞ Oma CSS -osiossa tai esimerkiksi lapsiteeman tyylitiedostoon kirjoittamalla.

Firefox-selain

Firefox tarjoaa erilaisen lähestymistavan vierityspalkin muokkaamiseen. Firefox ei tue ::webkit-scrollbar pseudo-elementtiä tai sen johdannaisia, mutta se tarjoaa jonkin verran mukautettavuutta käyttämällä CSS:n scrollbar-color ja scrollbar-width ominaisuuksia joilla voi muokata sivuston elementtien vierityspalkkeja mutta ei sivuston päävierityspalkkia.

Voit määrittää vierityspalkin leveyden Firefoxissa käyttämällä scrollbar-width ominaisuutta. Se hyväksyy seuraavat arvot:

• auto (oletus): automaattisesti määritetty leveys selaimen asetuksien perusteella.
• thin: ohuempi vierityspalkki kuin auto.
• none: vierityspalkki piilotetaan kokonaan, mutta vieritys on edelleen mahdollista.

Esimerkiksi, jos haluat asettaa ohuemman vierityspalkin, voit tehdä sen seuraavasti:

.vierityspalkillinen-elementti {
    scrollbar-width: thin;
}Kopioi koodi

Voit määrittää vierityspalkin värin Firefoxissa käyttämällä scrollbar-color ominaisuutta. Tämä ominaisuus ottaa kaksi väriarvoa: ensimmäinen määrittää vierityspalkin liikuteltavan osan värin ja toinen määrittää vierityspalkin radan värin.

Esimerkiksi, jos haluat asettaa oranssin liikuteltavan osan ja vaaleanharmaan radan, voit tehdä sen seuraavasti:

.vierityspalkillinen-elementti {
    scrollbar-color: #F90 #F5F5F5;
}Kopioi koodi