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.

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

• ### Output 👇

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

• ### Output 👇

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

• ### Output 👇

---

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

Comments

[Sloan the DEV Moderator]

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.

[Unclebigbay]

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.

[charllie]

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

[Unclebigbay]

Alright thanks 😊