Customize the scrollbar on a website

#webdev #html #css #codenewbie

Hello everyone, today we meet again for a new tutorial, as you saw in the title, today I'm going to teach you how to customize the scroll bar of a website. This tutorial works only on some web browsers that allow this feature: Google Chrome, Microsoft Edge, Opera, and Safari. Firefox and Internet Explorer do not allow you to customize your scrollbar (at least with this method). We will first see how to customize the scroll bar on most browsers and then we will see how to customize the scroll bar on the Mozilla Firefox browser. But don't worry, just because Internet Explorer doesn't allow this feature doesn't mean the display will be bad, users just won't be able to see your beautiful scrollbar 😎. You're ready, so here we go.

Customize the scroll bar on most browsers

The basics

To customize a scrollbar on a browser, you have to use the pseudo-element ::-webkit-scrollbar, which allows to modify the style of the scrollbar.

To modify a scrollbar, there are about 7 different selectors, some properties being less interesting than others, we will focus on three properties for this tutorial, which are the following :

::-webkit-scrollbar which represents the entire scrollbar. We can define with this property the width of our scrollbar.
::-webkit-scrollbar-thumb which is the scrollbar. For this pseudo-element, we can apply a multitude of different parameters to apply a style: gradients, colors, border-radius, :hover...
::-webkit-scrollbar-track which is the track (the progress bar) of the scrollbar, we can apply the background property.

Implementation

Now that we have seen the main properties for styling a scrollbar, we will put into practice what we have just seen through an example.

We will start with a simple HTML base, as follows:

<body>
  <h1>I'm the title</h1>
  <!-- Put a lot of text here, so that the page has to be scrolled to be seen in full. -->
  <p>[YOUR TEXT]</p>
</body>

Let's apply some styling to our Cascading Style Sheet :

body{
  background: #252525;
  color: white;
  margin: 20px 5%;
}

h1{
  text-align: center;
}

p{
  width: 800px;
  max-width: 95%;
  text-align: justify;
  margin: 0 auto;
}

And we put into practice the different properties seen previously (still in our CSS file 😉) :

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(8, 8, 8, 0.58);
  transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-track {
  background: transparent;
}

You can see the result of our piece of code below, where I replaced the '[YOUR TEXT]' with a Lorem Ipsum :

Finishes

For a cleaner page, we can apply the CSS property overflow: overlay; to our body which will allow our scrollbar to be inside our page.

We will also refine our scollbar by applying a border-radius and a dynamic effect on mouse-over.

You can see the changes in our CSS code below :

body{
  overflow: overlay;
  background: #252525;
  color: white;
  margin: 20px 5%;
}

h1{
  text-align: center;
}

p{
  width: 800px;
  max-width: 95%;
  text-align: justify;
  margin: 0 auto;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: rgba(125, 125, 125, 1);
  border-radius: 12px;
  transition: all 0.15s ease-in-out;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(157, 157, 154, 1);
}
::-webkit-scrollbar-track {
  background: transparent;
}

The result with its finishes :

Customize the scroll bar on Mozilla Firefox

For Mozilla Firefox, it's simpler (already it was not very complicated 😂), since we will be able to set only two parameters which are the following scrollbar-color and scrollbar-width.

For the first parameter : scrollbar-color, you will have to fill in two color values: the first one for the scrollbar color and the second one for the background color of the scrollbar progress zone.

For the second parameter : scrollbar-width, we can set several values for the width of our scrollbar: auto, inherit, initial, none, revert, thin, or unset.

For example, to customize a scrollbar on Mozilla, we could take the following code

html{
  scrollbar-color: #e82727 #959595;
  scrollbar-width: thin;
}

I hope this tutorial has helped you create your custom scrollbar, feel free to give me your feedback in comments ! 👍

Top comments (8)

lamka02sk • May 17 '21

There is also a way to do something similar in Firefox using actual CSS standard. You definitely should mention it. It is not as powerful, but it is honest :)

Clément Gaudinière • May 17 '21

I don't know this technique, can you tell me more ?

lamka02sk • May 17 '21

Sure, you can check the details here: developer.mozilla.org/en-US/docs/W...
It is still in a draft phase and there are only 3 options available so far: background/foreground color and width. And it only works in Firefox, beginning with version 64.