πŸš€ Unclebigbay's Blog

πŸš€ Unclebigbay's Blog

10 Custom Scrollbar Samples for your next project

Coloured Scrollbar, Image, Gif and Animation Scrollbar...

10 Custom Scrollbar Samples for your next project
Listen to this article

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

Did you noticed my scrollbar changed? 🀭 (big screen) πŸ‘‰

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;
}
  • Output πŸ‘‡

output of code above

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 πŸ‘‡

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

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

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 color here like below and will give us the same output as setting the background color 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 πŸ‘‡

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 πŸ˜‡.


Default body style code

Below is the default styling of the HTML body, to avoid duplication in the code samples πŸ‘Œ.

html {
background: #333333;
height: 50%;
overflow-y: hidden;
}
body {
height: 100%;
background: whitesmoke;
overflow: scroll;
width: 80%;
max-width: 600px;
margin: 0 auto;
padding: 3em;
font: 100%/1.4 serif;
border: 1px solid rgba(0, 0, 0, 0.25);
}

Example 1

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


h1 {
color: dodgerblue;
}

/* Scroll-bar styles */

body::-webkit-scrollbar {
width: 1em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-color: dodgerblue;
outline: 1px solid #333333;
}


  • Output πŸ‘‡


example 1 output on browser


Example 2

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


body::-webkit-scrollbar {
width: 1em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
outline: 3rem solid #333333;
background-color: #f5f5f5;
}
  • Output πŸ‘‡

example 2


Example 3

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡



body::-webkit-scrollbar {
width: 1em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
outline: 3rem solid #333333;
background-color: #f5f5f5;
}


  • Output πŸ‘‡


example 3 on browser


Example 4

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


h1 {
color: #d62929;
background: -webkit-linear-gradient(
90deg,
transparent,
magenta,
red,
yellow,
limegreen,
turquoise,
blue,
magenta,
transparent
);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

/* Main scrollbar styles */
body::-webkit-scrollbar {
width: 1em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: linear-gradient(
90deg,
transparent,
magenta,
red,
yellow,
limegreen,
turquoise,
blue,
magenta,
transparent
);
}


  • Output πŸ‘‡


sample 4 on browser


Let's make it more lively by setting images as our scroll bar thumb 🀩


Example 5

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


h1 {
color: blue;
}

/* Main scrollbar styles */
body::-webkit-scrollbar {
width: 2em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS3qXezdXaectR_LXKKMYd1Qi8cgUV3VgP9gHJhbY8w9bAoXZjgWo6y8CSgGvKYcEhmHqA&usqp=CAU"),
    linear-gradient(100deg, transparent, transparent);
background-position: center bottom, center -40px;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
}


  • Output πŸ‘‡


sample 5 on browser


Example 6

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡



h1 {
color: grey;
}

body::-webkit-scrollbar {
width: 3em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-image: url("https://www.pngitem.com/pimgs/m/421-4218752_angry-mouse-gif-clipart-computer-mouse-animated-film.png"),
linear-gradient(100deg, transparent, transparent);
background-position: center bottom, center -40px;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
}


  • Output πŸ‘‡


frame_generic_light (19).png


Example 7

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


h1 {
color: green;
}

body::-webkit-scrollbar {
width: 4em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-image: url("https://media.istockphoto.com/photos/blocks-picture-id172801980?k=6&m=172801980&s=612x612&w=0&h=MfOaUeOAVw6rRCtynFN8zFNYsuQYsLn0fQvp80JK_Io="),
linear-gradient(100deg, transparent, transparent);
background-position: center bottom, center -40px;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
}


  • Output πŸ‘‡


frame_generic_light (21).png


YES!!! we can also use our favorite gif as our scroll bar thumb 🀩


Example 8

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


h1 {
color: #333333;
}

body::-webkit-scrollbar {
width: 3em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-image: url("https://img1.picmix.com/output/stamp/normal/7/2/8/0/1200827_0898c.gif"),
    linear-gradient(100deg, transparent, transparent);
background-position: center bottom, center -40px;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
}


  • Output πŸ‘‡


frame_generic_light (22).png


Example 9

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡


h1 {
color: tomato;
}

body::-webkit-scrollbar {
width: 3em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-image: url("https://i.pinimg.com/originals/b5/2e/1b/b52e1bff41122d66aac6133d5718b6fb.gif"),
linear-gradient(100deg, transparent, transparent);
background-position: center bottom, center -40px;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
}


  • Output πŸ‘‡


image.png


Example 10

πŸ“’ Set the viewport of the code pen to 0.5x for a better view



  • Code πŸ‘‡



h1 {
color: purple;
}

body::-webkit-scrollbar {
width: 3em;
}

body::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

body::-webkit-scrollbar-thumb {
background-image: url("https://thumbs.gfycat.com/ShyAdventurousAsianporcupine-max-1mb.gif"),
linear-gradient(100deg, transparent, transparent);
background-position: center bottom, center -40px;
background-repeat: no-repeat, no-repeat;
background-size: contain, contain;
}


  • Output πŸ‘‡


example 10 on browser


Wow, what a journey, I am glad you made it to the end of this article, and that you have learned one or two things on how to customize a browser scrollbar, kindly use the gif and animation wisely as this might distract users. Let me know in the comment section which of the above examples stood out for you πŸ˜‰.

If you enjoyed reading this article and found it helpful, I will like to connect with you.

Let's connect on



See you in the next article. Bye Bye πŸ™‹β€β™‚οΈ

image.png

If you like my content, you can also support my blog below.

#browsers#programming-tips#tips#css#tricks
Β 
Share this