Πώς να δημιουργήσετε μπάρα κύλισης/Scrollbar με 10 γραμμές CSS

Σε αυτό το άρθρο θα σας δείξουμε πως μπορούμε με λίγες γραμμές κώδικα CSS να προσαρμόσουμε τη μπάρα κύλισης στον ιστότοπο μας.

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

Ας ξεκινήσουμε:

Το πρώτο πράγμα που πρέπει να εξηγήσουμε είναι τα στοιχεία ή τα μέρη μιας μπάρας κύλισης. Μια μπάρα κύλισης περιέχει την “μπάρα” και την “ράγα”. Εδώ είναι μία εικόνα που δείχνει τι ακριβώς:

Μπάρα κύλισης στους browsers

Η ύπαρξη μιας προσαρμοσμένης μπάρας κύλισης χρειάζεται τα εξής:

• ::-webkit-bar scrollbar
• ::-webkit-scrollbar-track
• ::-webkit-scrollbar-thumb

Ας ξεκινήσουμε με το πρώτο ψευδοστοιχείο για ::-webkit-scrollbar να ορίσουμε ένα πλάτος της κύλισής μας. Έτσι, στο CSS, γράφουμε:

::-webkit-scrollbar {
width: 10px;
}

Στη συνέχεια, θα προσθέσουμε την επιθυμητή διαβάθμιση που αντιπροσωπεύει τη βάση της μπάρας κύλισης. Μπορούμε να το διαμορφώσουμε προσθέτοντας χρώματα φόντου, σκιές, κτλ:

.section::-webkit-scrollbar-track {
background-color: darkgrey;
}

::-webkit-scrollbar-thumb {
background: grey;
}