Πώς να δημιουργήσετε: Προσαρμοσμένη κουλοχέρη

Μάθετε πώς να δημιουργήσετε προσαρμοσμένη κουλοχέρη χρησιμοποιώντας CSS.

Προσαρμοσμένη κουλοχέρη

Δοκιμάστε το προσωπικά σας

Δοκιμάστε το προσωπικά σας

Σημείωση:Οι εκδόσεις Firefox ή Edge πριν από την έκδοση 79 δεν υποστηρίζουν προσαρμοσμένες κουλοχέρες.

Πώς να δημιουργήσετε προσαρμοσμένη κουλοχέρη

Chrome, Edge, Safari και Opera υποστηρίζουν μη τυπικούς ::-webkit-scrollbar Ψευδοελέγχεις, που επιτρέπουν την τροποποίηση της εμφάνισης της κουλοχέρης του περιηγητή.

Το παρακάτω παράδειγμα δημιουργεί μια κουλοχέρη με πλάτος 10px, η οποία έχει γκρίζο δομικό/χρώμα του δομικού και σκοτεινόγκριο (#888) αθροιστή:

/* Πλάτος */
::-webkit-scrollbar {
  width: 10px;
}
/* Η διαδρομή */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
/* Ο αθροιστής */
::-webkit-scrollbar-thumb {
  background: #888;
}
/* Ο αθροιστής όταν βρίσκεται σε κατάσταση αναμονής του ποντικιού */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}

Δοκιμάστε το προσωπικά σας

Αυτό το παράδειγμα δημιουργεί μια κουλοχέρη με εφέ σκιάς:

Παράδειγμα

/* Πλάτος */
::-webkit-scrollbar {
  width: 20px;
}
/* Η διαδρομή */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}
/* Ο αθροιστής */
::-webkit-scrollbar-thumb {
  background: red;
  border-radius: 10px;
}

Δοκιμάστε το προσωπικά σας

Επιλογέας κουλοχέρης

Για τους περιηγητές webkit, μπορείτε να χρησιμοποιήσετε τους παρακάτω ψευδοελέγχεις για να προσαρμόσετε την κουλοχέρη του περιηγητή:

::-webkit-scrollbar Η ίδια η κουλοχέρης.
::-webkit-scrollbar-button Τα κουμπιά της κουλοχέρης (οι βέλη προς τα πάνω και τα κάτω).
::-webkit-scrollbar-thumb Ο κουλοχέρης που μπορεί να μετακινηθεί.
::-webkit-scrollbar-track Η διαδρομή της κουλοχέρης (μπάρου προόδου).
::-webkit-scrollbar-track-piece Η περιοχή του δομικού (μπάρου προόδου) που δεν καλύπτεται από τον αθροιστή.
::-webkit-scrollbar-corner Η γωνία της κουλοχέρης, όπου οι οριζόντιες και οι κάθετες κουλοχέρης συναντώνται.
::-webkit-resizer Καθορισμένος οδηγός που μπορεί να τραβηχτεί και να ρυθμιστεί σε κάποιες γωνίες στοιχείων.