DEV Community

Cover image for 10 Custom Scrollbar Samples for your next project
Unclebigbay
Unclebigbay

Posted on • Updated on • Originally published at unclebigbay.com

10 Custom Scrollbar Samples for your next project

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
sloan profile image
Info Comment hidden by post author - thread only accessible via permalink
Sloan

Hi there, we encourage authors to share their entire posts here on DEV, rather than mostly pointing to an external link. Doing so helps ensure that readers don’t have to jump around to too many different pages, and it helps focus the conversation right here in the comments section.

If you choose to do so, you also have the option to add a canonical URL directly to your post.

Collapse
unclebigbay profile image
Unclebigbay Author

thanks a lot for the feedback, I did that because, most of my article markup got mixed-up when I pasted them from Hashnode to my creat post here, and the embedded codepen did not show at all, that was why I refferred readers to my blog.

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