Η scrollbar-colorιδιότητα ελέγχει τα δύο χρώματα μιας γραμμής κύλισης: το χρώμα του αντίχειρα και το χρώμα του κομματιού . scrollbar-colorαποτελεί μέρος του προτύπου 1 του Scrollbars Module Level 1 της Ομάδας Εργασίας CSS, το οποίο είναι ακόμα σε εξέλιξη από αυτήν τη συγγραφή.
Πριν scrollbar-color, οι προγραμματιστές δεν είχαν κανέναν τυπικό τρόπο να αλλάξουν την προεπιλεγμένη εμφάνιση των γραμμών κύλισης ενός προγράμματος περιήγησης χωρίς να καταφύγουν στην απόκρυψη της γραμμής κύλισης μέσω overflow: hiddenκαι την απόδοση των γραμμών κύλισης που βασίζονται σε JavaScript ή τη χρήση χαρακτηριστικών γραμμής κύλισης με πρόθεμα προγράμματος περιήγησης. Με scrollbar-colorτην άλλη πλευρά, μπορούμε να σχεδιάσουμε μια γραμμή κύλισης για να ταιριάζει με ένα σχέδιο χωρίς να καταφύγουμε σε επανάληψη της λειτουργικότητας του προγράμματος περιήγησης ή χρησιμοποιώντας προθέματα προμηθευτών.
.scrollable-element ( scrollbar-color: red yellow; )
scrollbar-colorθα αποδεχτεί επίσης τιμές darkκαι lightγια να ταιριάζει με τις προτιμήσεις ενός χρήστη εάν χρησιμοποιεί κάτι σαν σκοτεινή λειτουργία σε Mac OSX.
.scrollable-element ( scrollbar-color: dark; )Από τον Μάρτιο του 2019, η υποστήριξη darkκαι οι lightτιμές δεν είναι διαθέσιμες σε κανένα πρόγραμμα περιήγησης. υποστηρίζεται στον Firefox. Δείτε την ενότητα υποστήριξης του προγράμματος περιήγησης παρακάτω για λεπτομέρειες.
Σύνταξη
scrollbar-color: auto | dark | light | ;Αξίες
scrollbar-color αποδέχεται τις ακόλουθες τιμές:
autoείναι η προεπιλεγμένη τιμή και θα αποδώσει τα τυπικά χρώματα της γραμμής κύλισης για τον πράκτορα χρήστη.darkθα πει στον πράκτορα χρήστη να χρησιμοποιήσει πιο σκοτεινές γραμμές κύλισης για να ταιριάζει με τον τρέχοντα συνδυασμό χρωμάτων.lightθα πει στον πράκτορα χρήστη να χρησιμοποιήσει ελαφρύτερες γραμμές κύλισης για να ταιριάζει με τον τρέχοντα συνδυασμό χρωμάτων.καθορίζει δύο χρώματα που θα χρησιμοποιηθούν για τη γραμμή κύλισης. Το πρώτο χρώμα είναι για τον «αντίχειρα» ή το κινητό μέρος της γραμμής κύλισης που εμφανίζεται στην κορυφή. Το δεύτερο χρώμα είναι για το "κομμάτι" ή το σταθερό τμήμα της γραμμής κύλισης.
Παράδειγμα
Αυτό συνδυάζει τη νέα σύνταξη προδιαγραφών και τα προθέματα WebKit.
Υποστήριξη προγράμματος περιήγησης
Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.
Επιφάνεια εργασίας
| Χρώμιο | Firefox | ΙΕ | Ακρη | Σαφάρι |
|---|---|---|---|---|
| 91 * | 87 | 11 | 88 * | TP * |
Κινητό / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 * | Οχι | 81 * | 14.0-14.4 * |
Σχετιζομαι με
scrollbar-gutterscrollbar-widthscrollbar
Πόροι
- Η τρέχουσα κατάσταση των γραμμών κύλισης στυλ
- Προσαρμοσμένες γραμμές κύλισης στο WebKit
- Πρόχειρο CSSWG Scrollbars Module
- Συλλογή W3C για περιπτώσεις χρήσης για τροποποίηση της γραμμής κύλισης
- Το μέλλον του CSS: Γραμμές κύλισης στο dev.to
- Έκδοση Chromium 891944