Γραμμή κύλισης - CSS-Κόλπα

Ένα σύντομο ιστορικό στυλ γραμμής κύλισης:

Κάποτε ήταν κάτι που μόνο ο Internet Explorer μπορούσε να κάνει (αρχαίες εκδόσεις) με τέτοια πράγματα -ms-scrollbar-base-color. Αυτά δεν υπάρχουν πια.
Στη συνέχεια, οι μηχανές προγράμματος περιήγησης που βασίζονται στο WebKit εισήχθησαν με τέτοια πράγματα ::-webkit-scrollbar. Αυτό καλύπτει κυρίως αυτή η καταχώριση Alamanac, καθώς λειτουργεί σε όλο το τοπίο Safari / Chrome σήμερα.
Τα πρότυπα έχουν εμπλακεί επιτέλους και αυτές οι επιλογές στυλ καλύπτονται από μη προκαταρκτικές ιδιότητες όπως το scrollbar-color και το scrollbar-width.

Η εμφάνιση των γραμμών κύλισης για τον κόσμο του Safari / Chrome βρίσκεται πίσω από το -webkitπρόθεμα του προμηθευτή.

Αυτή η καταχώριση almanac είναι μια επισκόπηση, για μια πιο ολοκληρωμένη ανάλυση της εργασίας με προσαρμοσμένες γραμμές κύλισης, διαβάστε αυτό το άρθρο CSS-Tricks.

body::-webkit-scrollbar ( width: 1em; ) body::-webkit-scrollbar-track ( box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); ) body::-webkit-scrollbar-thumb ( background-color: darkgrey; outline: 1px solid slategrey; )

Η -webkit-scrollbarοικογένεια ιδιοτήτων αποτελείται από επτά διαφορετικά ψευδο-στοιχεία που, μαζί, περιλαμβάνουν ένα πλήρες στοιχείο UI γραμμής κύλισης:

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

Εκτός από αυτά τα ψευδο-στοιχεία, υπάρχουν επίσης έντεκα κατηγορίες ψευδο-επιλογέα που δεν απαιτούνται, αλλά παρέχουν στους σχεδιαστές τη δύναμη να διαμορφώσουν διάφορες καταστάσεις και αλληλεπιδράσεις του UI της γραμμής κύλισης. Μια πλήρης ανάλυση αυτών των ψευδο-επιλογέων, και ένα λεπτομερές παράδειγμα, μπορείτε να βρείτε σε αυτό το άρθρο CSS-Tricks.

Δείτε αυτό το στυλό!

Σημεία ενδιαφέροντος

Εάν δεν υπάρχει επιλεγμένος επιλογέας που προηγείται των διαφόρων ψευδο-στοιχείων, τα στυλ θα ισχύουν για οποιαδήποτε γραμμή κύλισης που μπορεί να εμφανίζεται στη σελίδα.
Η ρύθμιση -webkit-scrollbarστυλ είναι ένας καλός τρόπος για να αναγκάσετε την ιστοσελίδα σας να εμφανίζει οριζόντιες ή κατακόρυφες γραμμές κύλισης σε εκδόσεις Mac OS νεότερες από το Lion, στις οποίες οι γραμμές κύλισης συνήθως αποκρύπτονται από προεπιλογή.
Δεδομένου ότι αυτή η ιδιότητα βρίσκεται πίσω από ένα -webkitπρόθεμα προμηθευτή, πολλά πρόσθετα jQuery έχουν γραφτεί στο "polyfill" ή επεκτείνουν αυτήν τη λειτουργικότητα σε άλλα προγράμματα περιήγησης. Ένα τέτοιο πρόσθετο είναι το jScrollPane.

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.