In this tutorial, we will learn how to create a custom scrollbar in CSS. By default, browsers provide their own scrollbar design, but with CSS, we can customize it to match the design of our website. We will use the ::-webkit-scrollbar pseudo-element to target the default scrollbar in webkit browsers and then customize it.


Example: 

Custom Scrollbar in CSS

Let's start with the HTML code:

<!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>Custom Scrollbar</title>
     <!--Link your css -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus blandit tempor sollicitudin purus sit amet justo tincidunt, sed volutpat metus posuere.</p>
            <!-- More Content -->
        </div>
    </div>
</body>
</html>


We have a basic HTML structure with a container and content div. The content div has some Lorem Ipsum text as well.


Now let's move on to the CSS code:


/* Target the default scrollbar in webkit browsers */
::-webkit-scrollbar {
    width: 10px;
}
  
/* Customize the scrollbar */
::-webkit-scrollbar-thumb {
    background-color: #131a81;
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}
  
/* Set smooth scrolling behavior */
body {
    scroll-behavior: smooth;
}
  

/* For Demo to show scrollbar in a div container */
.content {
    margin: auto;
    margin-top: 50px;
    overflow: scroll;
    width: 600px;
    height: 400px;
    border: 2px solid #444;
    padding: 20px;
}


First, we use the::-webkit-scrollbar pseudo-element to target the default scrollbar in webkit browsers. We set its width to 10 pixels.

Next, we customize the scrollbar using the::-webkit-scrollbar-thumb pseudo-element. We set its background color to #131a81, border radius to 10 pixels, and a box shadow of 5 pixels. You can change these values as per your website design.

Then, we set the scroll-behavior property of the body to smooth, which gives a smooth scrolling effect.

Lastly, We make a small container to display the scrollbar for the demo. We set the styles for the content div. We give it a margin, a 600px width, a 400px height, a 2px solid border, and 20px padding. We also set its overflow to scroll so that the scrollbar appears when there is content overflow.

And that's it! We have created a custom scrollbar for our website using CSS. You can experiment with different values and designs to get the desired effect.

In conclusion, customizing the scrollbar is a great way to enhance the design of your website. It is a simple and easy process that can be done using CSS. By targeting the default scrollbar and customizing it, we can create a scrollbar that matches our website's design.