Pasirinktiniai slinkties juostos „Mixin“ CSS-gudrybės

Anonim

Slinkties juostos yra vienas iš tų vartotojo sąsajos komponentų, esančių beveik kiekviename interneto puslapyje, tačiau mes (kūrėjai) to beveik nekontroliuojame. Kai kurios naršyklės suteikia mums galimybę pritaikyti savo išvaizdą, tačiau daugumai naršyklių, įskaitant „Firefox“, tai tiesiog neįmanoma.

Buvo keletas stiliaus slinkties juostų atnaujinimų ir standartizavimo. Paskutinį kartą peržiūrėkite slinkties juostų dabartinę būseną, kurią galite perkelti į „mixin“.

Vis dėlto „Chrome“ ir „Internet Explorer“ (taip) leidžia mums nustatyti pasirinktinius slinkties juostų stilius. Tačiau sintaksė yra siaubingai sudėtinga ir, žinoma, tikrai nėra standartinė. Sveiki atvykę į patentuotą pasaulį. Štai kodėl galbūt norėsite turėti nedidelį rinkinį, kad galėtumėte lengvai pritaikyti slinkties juostas. Ar ne?

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

Naudojimas:

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

Pavyzdys

Žiūrėkite „Pen Sass“ rinkinį, kuriame rasite „Hugo Giraudel“ (@HugoGiraudel) slinkties juostos stilių „CodePen“.

Einame toliau

Abiejose naršyklėse yra daug daugiau galimybių nei tik spalva ir dydis. Tačiau jie dažnai nepastebimi, todėl nemanau, kad verta papildyti mišinį šiomis galimybėmis. Drąsiai kurkite pažangesnį mišinį su papildomomis galimybėmis.

Kiti skaitymai:

  • Įterpimo ir pritaikyto „WebKit“ slinkties juosta
  • Tinkinti slinkties juostos „Webkit“
  • Tinkintos IE ir „Chrome“ slinkties juostos naudojant CSS