Σε αυτό το άρθρο θα βουτήξουμε στον κόσμο των γραμμών κύλισης. Ξέρω, δεν ακούγεται πολύ λαμπερό, αλλά πιστέψτε με, μια καλά σχεδιασμένη σελίδα ταιριάζει με μια αντίστοιχη γραμμή κύλισης. Η παλιομοδίτικη μπάρα κύλισης χρωμίου απλά δεν ταιριάζει τόσο πολύ.
Θα εξετάσουμε τις λεπτές λεπτομέρειες μιας γραμμής κύλισης και, στη συνέχεια, θα δούμε μερικά ωραία παραδείγματα.
Στοιχεία μιας γραμμής κύλισης
Αυτό είναι περισσότερο ανανέωση, πραγματικά. Υπάρχουν ένα ένα σωρό αναρτήσεις εδώ στο CSS-Tricks που εμβαθύνουν σε λεπτομέρειες όταν πρόκειται για προσαρμοσμένο στυλ γραμμής κύλισης σε CSS.
Για το στυλ μιας γραμμής κύλισης πρέπει να είστε εξοικειωμένοι με την ανατομία μιας γραμμής κύλισης. Ρίξτε μια ματιά σε αυτή την εικόνα:
Τα δύο κύρια συστατικά που πρέπει να έχετε υπόψη εδώ είναι:
- Η τροχιά είναι το φόντο κάτω από τη μπάρα.
- Η αντίχειρας είναι το τμήμα στο οποίο ο χρήστης κάνει κλικ και σέρνει γύρω του.
Μπορούμε να αλλάξουμε τις ιδιότητες της πλήρους γραμμής κύλισης χρησιμοποιώντας το πρόθεμα προμηθευτή::-webkit-scrollbar εκλέκτορας. Μπορούμε να δώσουμε στη γραμμή κύλισης σταθερό πλάτος, χρώμα φόντου, στρογγυλεμένες γωνίες… πολλά πράγματα! Εάν προσαρμόζουμε την κύρια γραμμή κύλισης μιας σελίδας, τότε μπορούμε να χρησιμοποιήσουμε ::-webkit-scrollbar απευθείας στο στοιχείο HTML:
html::-webkit-scrollbar {
/* Style away! */
}Εάν προσαρμόζουμε ένα πλαίσιο κύλισης, αυτό είναι το αποτέλεσμα overflow: scroll, τότε μπορούμε να χρησιμοποιήσουμε ::-webkit-scrollbar σε αυτό το στοιχείο αντ' αυτού:
.element::-webkit-scrollbar {
/* Style away! */
}Ακολουθεί ένα γρήγορο παράδειγμα που διαμορφώνει το στυλ της γραμμής κύλισης του στοιχείου HTML έτσι ώστε να είναι φαρδύ με κόκκινο φόντο:
Τι γίνεται αν θέλουμε να αλλάξουμε μόνο τον αντίχειρα ή το κομμάτι της γραμμής κύλισης; Το μαντέψατε — έχουμε ειδικά ψευδοστοιχεία με πρόθεμα για αυτά τα δύο: ::-webkit-scrollbar-thumb και ::-webkit-scrollbar-track, αντίστοιχα. Ακολουθεί μια ιδέα για το τι είναι δυνατό όταν συνδυάζουμε όλα αυτά τα πράγματα μαζί:
Αρκετά βούρτσισμα! Θέλω να σας δείξω τρεις βαθμούς προσαρμοσμένου στυλ γραμμής κύλισης και, στη συνέχεια, να ανοίξω μια μεγάλη βιτρίνα παραδειγμάτων από όλο τον ιστό για έμπνευση.
Απλές και αριστοκρατικές γραμμές κύλισης
Μια προσαρμοσμένη γραμμή κύλισης μπορεί να είναι ακόμα ελάχιστη. Συγκεντρώσα μια ομάδα παραδειγμάτων που αλλάζουν διακριτικά την εμφάνιση, είτε με μια ελαφριά αλλαγή χρώματος στον αντίχειρα ή το κομμάτι, είτε με ελαφρύ στυλ στο φόντο.
Όπως μπορείτε να δείτε, δεν χρειάζεται να τρελαίνουμε όταν πρόκειται για στυλ κύλισης. Μερικές φορές μια λεπτή αλλαγή είναι το μόνο που χρειάζεται για να βελτιώσει τη συνολική εμπειρία χρήστη με μια γραμμή κύλισης που ταιριάζει με το συνολικό θέμα.
Δροσερές εντυπωσιακές γραμμές κύλισης
Αλλά ας το παραδεχτούμε: είναι διασκεδαστικό να υπερβαίνεις λίγο και να ασκείς λίγη δημιουργικότητα. Ακολουθούν μερικές περίεργες και μοναδικές γραμμές κύλισης που μπορεί να είναι "υπερβολικά" σε ορισμένες περιπτώσεις, αλλά σίγουρα τραβούν τα βλέμματα.
Ενα ακόμα…
Τι λέτε να παίρναμε τη γραμμή κύλισης για μια περιστροφή σε ένα τρένο για τον αντίχειρα και τις ράγες για την, λοιπόν, την πίστα!
