Vierityspalkit ovat yksi niistä käyttöliittymäkomponenteista, jotka ovat läsnä lähes kaikilla Internet-sivuilla, mutta meillä (kehittäjillä) on vain vähän tai ei lainkaan valvoa sitä. Jotkin selaimet antavat meille mahdollisuuden mukauttaa ulkonäköään, mutta useimmille selaimille, mukaan lukien Firefox, se ei vain ole mahdollista.
Vierityspalkkien muotoiluun on tehty joitain päivityksiä ja standardointia. Katso uusin vierityspalkkien nykytila, jonka voit siirtää mixiniin.
Silti Chrome ja Internet Explorer (kyllä) antavat meille mahdollisuuden määritellä mukautetut tyylit vierityspalkkeille. Syntaksi on kuitenkin hirvittävän monimutkainen, eikä tietenkään ehdottomasti vakio. Tervetuloa omaan maailmaan. Siksi saatat haluta saada pienen yhdistelmän vierityspalkkien mukauttamiseksi helposti. Eikö?
@mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) ( // For Google Chrome &::-webkit-scrollbar ( width: $size; height: $size; ) &::-webkit-scrollbar-thumb ( background: $foreground-color; ) &::-webkit-scrollbar-track ( background: $background-color; ) // For Internet Explorer & ( scrollbar-face-color: $foreground-color; scrollbar-track-color: $background-color; ) )Käyttö:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Esimerkki
Katso Pen Sass -yhdistelmästä vierityspalkin muotoilu, jonka on kirjoittanut Hugo Giraudel (@HugoGiraudel) CodePenissä.
Mennä kauemmas
Molemmissa selaimissa on paljon enemmän vaihtoehtoja kuin vain väri ja koko. Ne kuitenkin jätetään usein huomiotta, joten en usko, että on syytä ylikuormittaa mixin näiden vaihtoehtojen kanssa. Voit vapaasti rakentaa edistyneemmän yhdistelmän lisävaihtoehdoilla.
Lisälukemat:
- Sisäänrakennettu ja mukautettu WebKit-vierityspalkki
- Mukautetut vierityspalkit Webkitissä
- Mukautetut vierityspalkit IE: lle ja Chromelle CSS: n avulla