Prilagođene klizače Mixin - CSS-trikovi

Klizači su jedna od onih komponenata korisničkog sučelja koje su prisutne na gotovo svakoj stranici interneta, no mi (programeri) imamo malo ili nimalo kontrole nad njom. Neki preglednici daju nam mogućnost prilagodbe izgleda, ali za većinu preglednika, uključujući Firefox, to jednostavno nije moguće.

Došlo je do nekih ažuriranja i standardizacije stila za pomicanje. Pogledajte trenutno stanje stilskih traka za pomicanje za najnovije koje biste mogli priključiti na mixin.

Ipak, Chrome i Internet Explorer (da) omogućuju nam definiranje prilagođenih stilova za klizače. Međutim sintaksa užasno složena i, naravno, definitivno nije standardna. Dobrodošli u vlasnički svijet. Zbog toga biste mogli poželjeti malo kombinacije za jednostavno prilagođavanje klizača. Pravo?

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

Upotreba:

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

Primjer

Pogledajte kombinaciju Pen Sass za oblikovanje klizača Huga Giraudela (@HugoGiraudel) na CodePenu.

Idući dalje

U oba preglednika postoji mnogo više opcija od same boje i veličine. Međutim, često se zanemaruju, pa mislim da ne vrijedi pretrpati kombinaciju ovih opcija. Slobodno napravite napredniji mixin s dodatnim opcijama.

Daljnja čitanja: