5/5 - (3 votes)
Scrollbar css

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

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

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

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

scrollbar

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

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

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

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

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

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

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

Αν θέλουμε πολύχρωμο/gradient γράφουμε τα εξής:
::-webkit-scrollbar-track {
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}
Τώρα το πιο σημαντικό βήμα, θα προσαρμόσουμε τη λαβή κύλισης (που ονομάζεται ψευδοστοιχείο αντίχειρα). Αρχικά, προσθέτουμε ένα σταθερό χρώμα φόντου στον αντίχειρα.
::-webkit-scrollbar-thumb {
background: grey;
}

Θα δείτε την τυπική λαβή της γραμμής κύλισης με μαύρο χρώμα. Τώρα θα το κάνουμε διαφανές. Χρησιμοποιούμε λοιπόν background: transparent;ή opacity: 0; και με χρήση box-shadow! Ας το δούμε:

::-webkit-scrollbar-thumb {
background: transparent;
box-shadow: 0px 0px 0px 100000vh grey;
}

Αυτό ήταν. Πάμε να δούμε συνολικά τον κώδικα που θα αντιγράψετε και εσείς απλά θα αλλάξετε τα χρώματα που θέλετε:

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

::-webkit-scrollbar-track {
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}

::-webkit-scrollbar-thumb {
background: transparent;
box-shadow: 0px 0px 0px 100000vh grey;

Αυτός ο ιστότοπος χρησιμοποιεί cookies για να σας προσφέρει μια καλύτερη εμπειρία περιήγησης.