Customize the scrollbar on a website
Tags: webdev, html, css, codenewbie
Published: 2021-05-16 11:01:55

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: 

```html
<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 :

```css
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 😉) :

```css
::-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 :

{% codepen https://codepen.io/clement-gaudiniere/pen/XWMKzbL %}

#### 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 :

```css
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 : 

{% codepen https://codepen.io/clement-gaudiniere/pen/JjWKOab %}

## 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

```css
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 !  👍