Προσαρμοσμένη γραμμή κύλισης Mixin - CSS-Κόλπα

Οι γραμμές κύλισης είναι ένα από αυτά τα στοιχεία διεπαφής χρήστη που υπάρχουν σχεδόν σε κάθε σελίδα του Διαδικτύου, ωστόσο εμείς (προγραμματιστές) δεν έχουμε καθόλου έλεγχο σε αυτό. Ορισμένα προγράμματα περιήγησης μας δίνουν τη δυνατότητα να προσαρμόσουμε την εμφάνισή τους, αλλά για τα περισσότερα προγράμματα περιήγησης, συμπεριλαμβανομένου του Firefox, αυτό δεν είναι δυνατό.

Υπήρξαν ορισμένες ενημερώσεις και τυποποίηση στο στυλ των γραμμών κύλισης. Δείτε την τρέχουσα κατάσταση του Styling Scrollbars για την τελευταία, την οποία θα μπορούσατε να μεταφέρετε σε ένα mixin

Ωστόσο, ο Chrome και ο Internet Explorer (ναι) μας επιτρέπουν να καθορίσουμε προσαρμοσμένα στυλ για γραμμές κύλισης. Ωστόσο, η σύνταξη τρομερά περίπλοκη, και φυσικά, σίγουρα δεν είναι τυπική. Καλώς ήλθατε στον ιδιόκτητο κόσμο. Αυτός είναι ο λόγος για τον οποίο ίσως θέλετε να έχετε μια μικρή μίξη για να προσαρμόσετε εύκολα τις γραμμές κύλισης. Σωστά?

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

Χρήση:

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

Παράδειγμα

Δείτε το Mix Sass για το στυλ γραμμής κύλισης του Hugo Giraudel (@HugoGiraudel) στο CodePen.

Πηγαίνοντας πιο μακριά

Και στα δύο προγράμματα περιήγησης, υπάρχουν πολλές περισσότερες επιλογές παρά μόνο το χρώμα και το μέγεθος. Ωστόσο, συχνά παραβλέπονται, οπότε δεν νομίζω ότι αξίζει να γεμίσετε το mixin με αυτές τις επιλογές. Μη διστάσετε να δημιουργήσετε μια πιο προηγμένη μίξη με επιπλέον επιλογές.

Περαιτέρω αναγνώσεις: