DEV Community

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

Posted on β€’ Edited on β€’ Originally published at unclebigbay.com

11 2

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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (4)

Collapse
 
sloan profile image
Sloan the DEV Moderator β€’
Comment hidden by post author
Collapse
 
unclebigbay profile image
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.

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 β€’

Alright thanks 😊

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

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more