Tässä artikkelissa sukeltamme vierityspalkkien maailmaan. Tiedän, se ei kuulosta liian lumoavalta, mutta luota minuun, hyvin suunniteltu sivu kulkee käsi kädessä vastaavan vierityspalkin kanssa. Vanhanaikainen kromi vierityspalkki ei vain mahdu niin paljon.
Tutkimme vierityspalkin hienoja yksityiskohtia ja katsomme sitten joitain hienoja esimerkkejä.
Vierityspalkin osat
Tämä on todellakin enemmän virkistystä. Siellä on joukko viestejä täällä CSS-Tricksissä jotka menevät syvälle yksityiskohtiin, kun kyse on mukautetusta vierityspalkin tyylistä CSS:ssä.
Vierityspalkin tyyliä varten sinun on tunnettava vierityspalkin anatomia. Katso tämä kuva:
Tässä on pidettävä mielessä kaksi pääkomponenttia:
- - raita on tausta palkin alla.
- - peukalo on osa, jota käyttäjä napsauttaa ja vetää ympäriinsä.
Voimme muuttaa koko vierityspalkin ominaisuuksia käyttämällä toimittajan etuliitettä::-webkit-scrollbar valitsin. Voimme antaa vierityspalkille kiinteän leveyden, taustavärin, pyöristetyt kulmat... monia asioita! Jos muokkaamme sivun päävierityspalkkia, voimme käyttää sitä ::-webkit-scrollbar suoraan HTML-elementtiin:
html::-webkit-scrollbar {
/* Style away! */
}Jos mukautamme vieritysruutua, se on seurausta overflow: scroll, sitten voimme käyttää ::-webkit-scrollbar sen sijaan kyseiselle elementille:
.element::-webkit-scrollbar {
/* Style away! */
}Tässä on nopea esimerkki, joka tyylittelee HTML-elementin vierityspalkin niin, että se on leveä punaisella taustalla:
Entä jos haluamme muuttaa vain vierityspalkin peukalon tai raitaa? Arvasit sen – meillä on erityiset etuliitteet pseudoelementit näille kahdelle: ::-webkit-scrollbar-thumb ja ::-webkit-scrollbar-track, vastaavasti. Tässä on ajatus siitä, mikä on mahdollista, kun yhdistämme kaikki nämä asiat:
Harjaamista riittää! Haluan näyttää sinulle kolme astetta mukautettua vierityspalkin tyyliä ja avata sitten suuren esittelyn verkosta poimittuja esimerkkejä saadaksesi inspiraatiota.
Yksinkertaiset ja tyylikkäät vierityspalkit
Mukautettu vierityspalkki voi silti olla minimaalinen. Kokosin joukon esimerkkejä, jotka muuttavat hienovaraisesti ulkonäköä, joko peukalon tai raidan pienellä värimuutoksella tai taustalla kevyellä tyylillä.
Kuten näet, vierityspalkin tyylin suhteen meidän ei tarvitse olla hulluna. Joskus tarvitaan vain hienovarainen muutos parantaakseen yleistä käyttökokemusta vierityspalkin avulla, joka vastaa yleistä teemaa.
Tyylikkäät katseenvangitsijat vierityspalkit
Mutta myönnetään se: on hauskaa mennä hieman yli laidan ja harjoitella luovuutta. Tässä on joitain outoja ja ainutlaatuisia vierityspalkkeja, jotka saattavat olla "liian paljon" joissakin tapauksissa, mutta ne ovat varmasti silmiinpistäviä.
Yksi vielä…
Mitä jos ottaisimme vierityspalkin pyöräilemään junassa peukalolla ja raiteita varten!
