Bare de derulare personalizate Mixin - CSS-Tricks

Barele de derulare sunt una dintre acele componente UI care sunt prezente pe aproape fiecare pagină a internetului, totuși noi (dezvoltatorii) avem puțin sau deloc control asupra ei. Unele browsere ne oferă posibilitatea de a-și personaliza aspectul, dar pentru majoritatea browserelor, inclusiv Firefox, nu este posibil.

Au existat unele actualizări și standardizări la stilizarea barelor de derulare. Consultați Starea curentă a barelor de derulare a stilului pentru cea mai recentă, pe care o puteți transporta la un mixin.

Totuși, Chrome și Internet Explorer (da) ne permit să definim stiluri personalizate pentru bare de defilare. Cu toate acestea, sintaxa oribil de complexă și, desigur, cu siguranță nu este standard. Bine ați venit în lumea proprietară. Acesta este motivul pentru care ați putea dori să aveți un mic mixin pentru a vă personaliza ușor barele de defilare. Dreapta?

@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; ) )

Utilizare:

body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )

Exemplu

Vedeți mixul Pen Sass pentru stilul barei de defilare de Hugo Giraudel (@HugoGiraudel) pe CodePen.

Mergând mai departe

Pe ambele browsere, există mult mai multe opțiuni decât doar culoarea și dimensiunea. Cu toate acestea, acestea sunt adesea trecute cu vederea, așa că nu cred că merită supraaglomerarea mixinului cu aceste opțiuni. Simțiți-vă liber să construiți un mixin mai avansat cu opțiuni suplimentare.

Citiri suplimentare: