Customizing Scroll bar With Css.

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.

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.

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

To know more about these css properties visit MDN Web Docs

Blog

Customizing Scroll bar With Css.

Dolen Ch. Deori

Make the HTML and CSS files

Basic HTML and CSS styling

Know about scrollbar.

Styling the scrollbar

Join Our Newsletter. No Spam, Only the good stuff.

Related