DEV Community

loading...
Cover image for 10 Custom Scrollbar Samples for your next project

10 Custom Scrollbar Samples for your next project

Unclebigbay
AYODELE, Samuel Adebayo is a Frontend Developer from Kwara State Nigeria. with hands-on experience in JavaScript, React, Redux, and Version control.
Originally published at unclebigbay.com ・Updated on ・2 min read

Hello, my gorgeous friends on the internet πŸ‘‹, how are you doing this weekend 😊.

Did you noticed my sidebar changed? 🀭 πŸ‘‰

In this article, I will be showing you 10 samples of custom browser scrollbars with their code snippets and also how you can implement them in your next project πŸ’ƒ.

Without any further ado, let's rideπŸ‡.

Below πŸ‘‡ is an image showing the difference between a normal scrollbar and a customized scrollbar.

scroball sample for normal and custom scroball

But before we move any further, let me briefly explain what makes that πŸ‘† achievable πŸ‘‡

1. body::-webkit-scrollbar

This is a pseudo-element that targets the whole browser scrollbar* and allows us to style it with CSS, our body element or any other element we want to apply scrollbar style must have an overflow of scroll.

Example

body {
   background: lightgrey;
   overflow-y: scroll;
}

body::-webkit-scrollbar {
   width: 10em;
   background-color: red;
}
Enter fullscreen mode Exit fullscreen mode
  • ### Output πŸ‘‡

output of code above

Now our scrollbar thumb is visible and easily draggable, let's proceed πŸ‘‡.

2. ::-webkit-scrollbar-thumb

If you run the code from the example above, you will notice that the scrollbar button is difficult to notice from the background color of red. In other to make the draggable scrolling handle visible we need to make use of a pseudo-element called ::-webkit-scrollbar-thumb, let's proceed to apply it in our code.

Update the above example with the code below πŸ‘‡

body::-webkit-scrollbar-thumb {
   background-color: #333333;
   height: 10rem;
}

Enter fullscreen mode Exit fullscreen mode
  • ### Output πŸ‘‡

browser output of body::-webkit-scrollbar-thumb

3. ::-webkit-scrollbar-track

This pseudo-element is the track of the scrollbar, where the dark charcoal (#333333) bar in the above example is on top of the red bar.

This red bar is called the scrollbar track, which means that we can directly set the background colour here like below and will give us the same output as setting the background colour on the scrollbar itself ::-webkit-scrollbar.

Update the previous code with the code below and check the effect out on your browser.

body::-webkit-scrollbar-track {
   background-color: green;
}

Enter fullscreen mode Exit fullscreen mode
  • ### Output πŸ‘‡

browser sample of the ::-webkit-scrollbar-track


With the knowledge of the above-explained pseudo-elements, we are good to go, to check what is achievable with what we just learned.

I present to you 10 samples of a customized scrollbar πŸ˜‡.

Continue reading the original post on my blog πŸ‘‰https://unclebigbay.com/10-custom-scrollbar-samples-for-your-next-project

Discussion (4)

Collapse
charllie profile image
charllie

Thanks for your post! Maybe you should warn that some browsers do not handle these webkit properties.

Collapse
unclebigbay profile image
Unclebigbay Author

Alright thanks 😊

Some comments have been hidden by the post's author - find out more