Miten luodaan: Mukautettu vierityspalkki

Opit, miten luodaan mukautettu vierityspalkki CSS:n avulla.

Mukautettu vierityspalkki

Kokeile itse

Kokeile itse

Huomaa:Firefox tai Edge 79:n aikaisemmat versiot eivät tue mukautettuja vierityspalkkeja.

Miten luodaan mukautettu vierityspalkki

Chrome, Edge, Safari ja Opera tukevat epästandardia ::-webkit-scrollbar Pseudoelementti, joka mahdollistaa selaimen vierityspalkin ulkoasun muokkaamisen.

Seuraavassa esimerkissä luodaan 10px leveä vierityspalkki, jolla on harmaa reuna ja syvän harmaan (#888) liukusäädin:

/* Leveys */
::-webkit-scrollbar {
  width: 10px;
}
/* Kohta */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Liukusäädin */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Hiiren osoitin päällä oleva liukusäädin */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Kokeile itse

Tämä esimerkki luo varjostetun vierityspalkin:

Esimerkki

/* Leveys */
::-webkit-scrollbar {
  width: 20px;
}
/* Kohta */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px harmaa;
  border-radius: 10px;
}
/* Liukusäädin */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Kokeile itse

Vierityspalkin valitsin

WebKit-selaimissa voit käyttää seuraavia väärennettyjä elementtejä mukauttaaksesi selaimen vierityspalkkia:

::-webkit-scrollbar Vierityspalkki itsessään.
::-webkit-scrollbar-button Vierityspalkin painikkeet (ylöspäin ja alaspäin osoittavat nuolet).
::-webkit-scrollbar-thumb Siirrettävä vierityssilta.
::-webkit-scrollbar-track Vierityspalkin kohta (edistyskeite).
::-webkit-scrollbar-track-piece Kohde, jota liukusäädin ei peitä.
::-webkit-scrollbar-corner Lähteet vasemmassa kulmassa, horisontaalinen ja vertikaalinen vierityspalkki kohtaavat täällä.
::-webkit-resizer Liukuvat, muokattavat kokoonpanovaihtelevuudet, jotka ilmestyvät joidenkin elementtien alapuolelle.