Creating A Custom Scroll Bar For Website

In this article, we learn and understand the basics of the scroll bar, how we style our scroll bar and how we style our scroll bar using html css.

Yes when we do code our html part, code content length is very long so we got a vertical scroll bar and we need this scroll bar so users can scroll content on the bottom but the issue is that we get a horizontal scroll bar.

This scroll bar is very bad for the user experience and we check our code and were just confused 😵 how we solve this issue and disabled our horizontally scroll bar. So first we see how we enable or disable vertical and Horizontal scroll bars then we move next step that how we style our scroll bar ❤.

What how to default scroll bar looks like:

default scroll bar

Yes, you can see a scroll bar in this project, for the scroll bar we create a div and a heading and add lots of paragraphs for the scroll bar. Because I do not get a scroll bar using 4 paragraphs I add 2 rem font sizes instead of adding a paragraph. So we get this default scroll bar.


This is a scroll bar code if you want a scroll bar

<!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>Projectfreecode</title>
    <style>
        p{
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div class="code">
        <h1>Projectfreecode</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
    </div>
</body>
</html>

Now we put the heights and width of our div so we vertical and horizontal scroll bar so first we enable scroll bar then disabled and then we style our scroll bar. We did this thing because you have must knowledge about scroll bar not only styling.

Vertical & Horizontal Scroll Bar Code

     
          p{
            font-size: 2rem;
        }
      
        .code{
            width: 210px;
  height: 210px;
  overflow: scroll;
        }

Output

ertical & Horizontal Scroll Bar Code

Disable vertical scroll bar using css

       .code{
         overflow-y: hidden; 
  /* Hide vertical scrollbar using only css */

        }

Output

Disable vertical scroll bar using css

By using this single css tag overflow-y: hidden and our vertical scroll bar removes easily. In this tag Y means vertical and overflow means content overflow so there is appearance and what we want to be hidden so we use this tag in y side content overflow so please hide it.

Disable horizontal scroll bar using css

.code{
  width: 210px;
  height: 210px;
  overflow: scroll;
  overflow-x: hidden;
   /* Hide horizontal scrollbar */
        }

Output

Disable horizontal scroll bar using css
By using this single css tag overflow-x: hidden and our horizontal scroll bar removes easily. In this tag x means horizontal and overflow means content overflow so there is appearance and what we want to be hidden so we use this tag in y side content overflow so please hide it.

Disable horizontal and vertical in 1 Tag

     .code{
            width: 210px;
  height: 210px;
  overflow: hidden;
/* Disable horizontal and vertical */

        }

Output

This tag is used when we don’t want any vertical or Horizontal scroll bar on the website. Just write overflow and give the value of hidden so scroll bar disable.

Styling Scroll Bar Using Css

<!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>Projectfreecode</title>
    <style>
      ::-webkit-scrollbar {
        width: 25px;
      }
      
      ::-webkit-scrollbar-track {
        background: blue; 
      }
       
          ::-webkit-scrollbar-thumb {
        background: red; 
        border-radius: 20px;
      }
      
      ::-webkit-scrollbar-thumb:hover {
        background: fuchsia; 
      }
      </style>
</head>
<body>
    <div class="code">
        <h1>Projectfreecode</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint eaque harum animi magnam cumque facere error vel officia doloribus consectetur in neque ad quam, molestiae quibusdam incidunt id soluta dolor ea! Laborum veniam, architecto pariatur natus sit illo et.</p>
    </div>
</body>
</html>

Scroll Bar Css Output

without hover scroll bar

css scroll bar

when the hover scroll bar

 scroll bar styling

Video Output

Code Explain How to style Scroll Bar

We share this completely html and Css code for styling our scroll bar using Css. We use many styling tags to style every part of the scroll bar. So let’s understand what each tag does in the scroll bar.

Style Width of the scroll bar

 ::-webkit-scrollbar {
        width: 25px;
      }

We use this tag for creating the width of the scroll bar. The default scroll bar size is only 17px so we do a little bit of customizing so you can see the difference between the regular scroll bar and this our new styling scroll bar. We give 25px width to the scroll bar so when we give color to scroll so we easily see.

Unbelievable Things we can do with Html

Style track color of the scroll bar

::-webkit-scrollbar-track {
        background: blue; 
      }

This tag gives color on track, now you think what is tracked in scroll bar so when you click or hover scroll bar and then there is empty scroll bar (when you scroll there is empty space before and after in scroll bar) so this called track. So we use this tracking tag to color our scroll bar track.

Style background-color of the scroll bar

 ::-webkit-scrollbar-thumb {
        background: red; 
        border-radius: 20px;
      }

You see in our video output there is a completely changed scroll bar and the main change is we change the color and give a border-radius. Because the default scroll bar doesn’t have a border radius. We use this thumb track to style our scroll bar and give a 20px border radius. Background color work when we don’t use the scroll bar means when we hover on the scroll bar it’s completely changed.

Style Hover effect of the scroll bar

 ::-webkit-scrollbar-thumb:hover {
        background: fuchsia; 
      }

Yeah, we have a scroll bar tag like styling other html elements. In this tag, we give all styling applying when we hover over the scroll bar. We give a background color in the scroll bar so when we hover and scroll down its color change. You see in video output there are different colors and we hover and we don’t hover (use) the scroll bar. I give only background color but you can try with any other property to see changes.

Vs Code Extension For Frontend Web Developer

Summary

In this article, we create a scroll bar and learn about all scroll bar properties. We create a scroll bar, we disabled the scroll bar. Then we give color to the scroll bar. Completely changing the default to a new scroll bar.


We write this article from scratch, if we do any mistakes please tell us by email or drop a comment. We try to improve day by day and your review made more improvements. Thank you❤
Read our other blogs’ articles and give support by visiting another article. We share daily content about development and Project codes.

My name is ankit Dungawat Know as codewithrandom, I am frontend developer and run a Instagram page over 140k followers so I daily share new tutorial or project on this website. I run more then 3 website or 2 Instagram pages.

Leave a Comment