Customizing Scroll bar With Css.
Tags: beginners, tutorial, css, html
Published: 2021-10-18 04:19:19

Having a custom scroll bar gives a more personalize look and feel to your website.
In this tutorial we will learn how we can customize scroll bar with CSS.

#### Make the HTML and CSS files

Now first we have to do the small set up for our HTML and CSS files. Go ahead and make `index.html` file and `style.css` file that’s all we are gonna need today.
> Make sure you link the css file to your html file

### Basic HTML and CSS styling

Now write the following HTML code in your `index.html` file.
```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Scroll Bar</title>

    <!-- CSS FILE LINK -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!-- LOREM IPSUM TEXT FOR DEMO -->
    <div class="main-page-body">
      <h1>CUSTOM SCROLLBAR WITH CSS</h1>
      <p class="demo-text">
        <!-- Insert a Bunch of Demo text Here -->
      </p>
    </div>
  </body>
</html>
```
This code does nothing but use a bunch of text so that our scroll bar can visible.

Now style the texts with some basic styling. write these CSS code in your `style.css` file.

```
/* RESET DEFAULT STYLING */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* STYLING THE TEXT */
.main-page-body p.demo-text {
  font-family: sans-serif;
  margin: 3vw;

  /* Using the "vw" unit so the page zoom dosent effect our text 
  size and line height */

  font-size: 2vw;
  line-height: 3vw;
  text-align: justify;
}

.main-page-body h1 {
  font-family: sans-serif;
  font-size: 4vw;
  margin: 3vw;
  color: #ff34ee;
}
```
You can follow this code or write your own styling as your wish.

### Know about scrollbar.
Before moving forward, have a look at different parts of a scroll bar it will help us to understand the CSS code.
![Scrollbar Diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7khpi0fsz6kk6jpqdh4e.png)
These are the parts that we are going to style with our css.

### Styling the scrollbar
Now it’s time to style our scroll bar. To do that we are going to use 3 webkit properties of CSS this are  `::-webkit-scrollbar` , `::-webkit-scrollbar-track` , `::-webkit-scrollbar-thumb`.

Now add this CSS code to your `style.css` file.
```
/* STYLING SCROLLBAR */

::-webkit-scrollbar {
  width: 1vw; /* THIS WILL RESET THE DEFAULT SCORLLBAR STYLING */
}

/* TO STYLE THE SCROLLBAR TRACK */
::-webkit-scrollbar-track {
  background-color: #ffffff; /* THIS WILL SET THE COLOR OF THE SCROLLBAR TRACK */
}

/* TO STYLE THE SCROLLBAR THUMB */
::-webkit-scrollbar-thumb {
  background-color: #ff34ee;
  border: 0.3vw solid #ffffff;
  border-radius: 5vw;
}
```

The CSS codes for customizing your scroll bar looks likes this.

Now we are using `::-webkit-scrollbar` to reset the default styling of the scrollbar. After we have defined our width in `::-webkit-scrollbar` property, Then we have styled our scroll bar track with `::-webkit-scrollbar-track` property. At last we styled our scroll bar thumb with `::-webkit-scrollbar-thumb` property. And that’s it you can now play around these properties to create amazing looking custom scroll bars.
![Demo Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gn5dbu0onzrps155ybxp.png)
> Note: this `webkit` property only going to work on webkit based browsers like (chrome , all IOS based browsers, opera etc.) know more about webkit [Here](https://webkit.org/)

> To know more about these css properties visit [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scrollbars)