How to create a scrollbar with 10 CSS lines

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-thumb {
background: grey;
}