Scrollbar css

How to create a scrollbar with 10 CSS lines

5/5 - (3 votes)
Scrollbar css

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

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;
}

If we want colorful / gradient we write the following:
::-webkit-scrollbar-track {
background: linear-gradient(0deg, rgba(255, 0, 0, 1) 0%, rgba(7, 0, 211, 1) 100%);
}
Now the most important step, we will adjust the scroll handle (called the thumb pseudo-element). First, we add a solid background color to the thumb.
::-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;