Ritjoslas ir viens no tiem lietotāja saskarnes komponentiem, kas atrodas gandrīz katrā interneta lappusē, tomēr mums (izstrādātājiem) tas ir maz vai vispār nekontrolējams. Dažas pārlūkprogrammas dod mums iespēju pielāgot to izskatu, bet lielākajai daļai pārlūkprogrammu, tostarp Firefox, tas vienkārši nav iespējams.
Stila ritjoslās ir veikti daži atjauninājumi un standartizācija. Skatiet jaunāko ritināšanas joslu pašreizējo stāvokli, kuru varat pārvietot uz miksinu.
Tomēr pārlūks Chrome un Internet Explorer (jā) ļauj mums definēt ritināšanas joslu pielāgotos stilus. Tomēr sintakse ir šausmīgi sarežģīta, un, protams, noteikti nav standarta. Laipni lūdzam patentētajā pasaulē. Tāpēc, iespējams, vēlēsities, lai jums būtu neliels mikseris, lai ērti pielāgotu ritjoslas. Pa labi?
@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; ) )Lietošana:
body ( @include scrollbars(10px, pink, red); ) .custom-area ( @include scrollbars(.5em, slategray); )Piemērs
Skatiet Hug S Giraudel (@HugoGiraudel) ritināšanas joslas veidni Pen Sass, izmantojot CodePen.
Dodamies tālāk
Abās pārlūkprogrammās ir daudz vairāk iespēju nekā tikai krāsa un izmērs. Tomēr tie bieži tiek ignorēti, tāpēc es nedomāju, ka ir vērts pārpildīt mixin ar šīm iespējām. Jūtieties brīvi veidot modernāku maisījumu ar papildu iespējām.
Papildu lasījumi:
- Ievietot un pielāgot WebKit ritjoslu
- Pielāgotas ritjoslas Webkit
- Pielāgotas ritjoslas IE un Chrome, izmantojot CSS