SCROLLBAR TIPS
In this article we will show you how we can customize the scroll bar on our site with a few lines of CSS code.
Custom scroll bars are becoming more and more popular nowadays and I'm willing to deepen them. There are several reasons to customize a scroll bar such as style and functionality.
Let's start:
Το πρώτο πράγμα που πρέπει να εξηγήσουμε είναι τα στοιχεία ή τα μέρη μιας μπάρας κύλισης. Μια μπάρα κύλισης περιέχει την “μπάρα” και την “ράγα”. Εδώ είναι μία εικόνα που δείχνει τι ακριβώς:
Scrollbar in browsers
Having a custom scroll bar requires the following:
- ::-webkit-bar scrollbar
- ::-webkit-scrollbar-track
- ::-webkit-scrollbar-thumb
Let's start with the first pseudo-element for :: - webkit-scrollbar to define a width of our scroll. So, in CSS, we write:
::-webkit-scrollbar {
width: 10px;
}
Στη συνέχεια, θα προσθέσουμε την επιθυμητή διαβάθμιση που αντιπροσωπεύει τη βάση της μπάρας κύλισης. Μπορούμε να το διαμορφώσουμε προσθέτοντας χρώματα φόντου, σκιές, κτλ:
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-track {
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}
::-webkit-scrollbar-thumb {
background: grey;
}
You will see the standard scroll bar handle in black. Now we will make it transparent. So do we use background: transparent; or opacity: 0? and using box-shadow! Let's see:
::-webkit-scrollbar-thumb { background: transparent; box-shadow: 0px 0px 0px 100000vh grey; }
That's it. Let's see the whole code that you will copy and you will just change the colors you want:
::-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;
LATEST NEWS
Γεμισε το gmail, δείτε πως γίνεται η απελευθέρωση χώρου στο gmail σας εύκολα
MoreΠως κάνω viber εγκατάσταση δωρεάν android Κινητό;
MoreΠως κάνουμε σωστά εγκατάσταση viber στον υπολογιστή μας;
More