Vierityspalkki - CSS-temppuja | CSS-almanakka 2025

Lyhyt historia vierityspalkkien muotoilusta:

Aikaisemmin asia, jonka vain Internet Explorer pystyi tekemään (muinaiset versiot) esimerkiksi -ms-scrollbar-base-color. Näitä ei ole enää olemassa.
Sitten WebKit-pohjaiset selainmoottorit pääsivät alukseen esimerkiksi ::-webkit-scrollbar. Sitä tämä Alamanac-merkintä kattaa enimmäkseen, koska se toimii tänään Safari / Chrome-maisemassa.
Standardit ovat vihdoin mukana, ja nämä muotoiluvaihtoehdot kuuluvat etuliitetyillä ominaisuuksilla, kuten vierityspalkin väri ja vierityspalkin leveys.

Muotoilun vierityspalkit Safari / Chrome-maailmaan ovat esillä -webkittoimittajan etuliitteen takana .

Tämä almanakka-merkintä on yleiskatsaus, jotta saat tarkemman erittelyn mukautettujen vierityspalkkien käytöstä lukemalla tämän CSS-Tricks-artikkelin.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

-webkit-scrollbarPerheen ominaisuudet koostuu seitsemästä eri pseudo-elementtejä, jotka yhdessä muodostavat täydellisen vierityspalkki UI elementti:

::-webkit-scrollbarosoittaa itse palkin taustan. Yleensä muut elementit kattavat sen
::-webkit-scrollbar-button osoittaa vierityspalkin suuntapainikkeet
::-webkit-scrollbar-track osoittaa tyhjän tilan etenemispalkin alapuolelta
::-webkit-scrollbar-track-piece on etenemispalkin ylimmäinen kerros, jota vedettävä vierityselementti (peukalo) ei kata
::-webkit-scrollbar-thumb osoite vedettävälle vierittävälle elementille, jonka koko muuttuu vieritettävän elementin koosta riippuen
::-webkit-scrollbar-corner osoite vieritettävän elementin (yleensä) alakulmaan, jossa kaksi vierityspalkkia saattaa kohdata
::-webkit-resizerosoittaa vedettävän koon muuttokahvan, joka näkyy scrollbar-cornerjoidenkin elementtien alakulman yläpuolella

Näiden pseudoelementtien lisäksi on myös yksitoista pseudovalitsinluokkaa, joita ei vaadita, mutta jotka tarjoavat suunnittelijoille mahdollisuuden muotoilla vierityspalkin käyttöliittymän erilaisia tiloja ja vuorovaikutusta. Täydellinen erittely näistä pseudovalitsimista ja yksityiskohtainen esimerkki löytyy tästä CSS-Tricks-artikkelista.

Katso tämä kynä!

Kiinnostavat paikat

Jos eri pseudoelementtejä edeltää karsintavalitsin, tyylejä sovelletaan kaikkiin vierityspalkkeihin, jotka saattavat näkyä sivulla.
-webkit-scrollbarTyylien asettaminen on hyvä tapa pakottaa verkkosivusi näyttämään vaaka- tai pystysuuntaisia vierityspalkkeja Mac OS -versioissa, jotka ovat uudempia kuin Lion, joissa vierityspalkit ovat yleensä piilotettuina oletuksena.
Koska tämä ominaisuus on -webkittoimittajan etuliitteen takana , useita jQuery-laajennuksia on kirjoitettu polyfill-tiedostoon tai laajentamaan tätä toimintoa muihin selaimiin. Yksi tällainen laajennus on jScrollPane.

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.