Ayodele Samuel Adebayo
Unclebigbay's ๐Ÿš€ Blog

Unclebigbay's ๐Ÿš€ Blog

10 Custom Html Scrollbar Samples for your next project

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

Ayodele Samuel Adebayo
ยทJun 12, 2021ยท

8 min read

10 Custom Html Scrollbar Samples for your next project

Subscribe to my newsletter and never miss my upcoming articles

Play 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.

ย 
Share this

Impressum

Hi ๐Ÿ™‹โ€โ™‚๏ธ, I am glad you made it to my blog, I would like to connect with you, I am active on