Hello readers, Today In this article we’ll show you how to create a Custom Scrollbar Using HTML & CSS. This type of CSS Scrollbar is used on the websites for the webpage for scroll. One of the most beautiful and good-looking designs of a CSS Scrollbar.
You easily create this Custom Scrollbar Using HTML & CSS. then this article will definitely help you. For this, you need to have an idea about basic HTML and CSS then you can understand the following codes. It is designed in a completely modern way.
Some Information About This Pure CSS Scrollbar
There have 5 custom different design smooth scrollbar. The scrollbar is well known in light of their adaptable property. These scrollbars are lightweight so the size and burden time is quick. The custom scrollbar is famous in light of the fact that the client can change the style of the scrollbar as their needs.
Watch the video tutorial to create Pure CSS Scrollbar
If you want to learn how to make it completely, you can watch the video tutorial below. Here I have shown how I made these Pure CSS Scrollbar step by step completely beautifully. So you can learn how to make these Pure CSS Scrollbar Design. This is a youtube video. If you can learn something from the video or if the video seems helpful to you, you must like and subscribe to the video. As a result, I get motivated to create other new designs.
Hopefully, the above video tutorial has helped you to create this Custom CSS Scrollbar Tutorial. If you like the video tutorial, be sure to like the video and comment on it so I can encourage you to create new designs.
You might like this:
- Neumorphism JavaScript Calculator
- How To Create A Website Using HTML & CSS
- Pricing Card Tables using HTML, CSS & JS
CSS Scrollbar | Source Codes
You have to create an HTML, CSS & JS File For this CSS Scrollbar. After creating these files just paste the following codes into your file.
The First Step, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension. You’ve to download files from the given download button to use.
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Scrollbar</title>
<!----CSS link----->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
</div>
</body>
</html>
Second Step, you have to create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
CSS CODE:
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.scrollbar{
margin-left: 30px;
float:left;
height: 300px;
width: 65px;
background: #f5f5f5;
overflow-y: scroll;
margin-bottom: 25px;
}
.force-overflow{
min-height: 450px;
}
#wrapper{
text-align: center;
width: 500px;
margin: auto;
}
#style-1::-webkit-scrollbar-track{
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background: #f5f5f5;
border-radius: 10px;
}
#style-1::-webkit-scrollbar{
width: 10px;
background: #f5f5f5;
}
#style-1::-webkit-scrollbar-thumb{
border-radius: 10px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122,153,217)),color-stop(0.72, rgb(73,125,189)), color-stop(0.86, rgb(28,58,148)));
}
#style-2::-webkit-scrollbar-track{
background: #f5f5f5;
border: 1px solid #000;
}
#style-2::-webkit-scrollbar{
width: 10px;
background: #f5f5f5;
}
#style-2::-webkit-scrollbar-thumb{
background: #000;
}
#style-3::-webkit-scrollbar-track{
background: #f5f5f5;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
#style-3::-webkit-scrollbar{
width: 10px;
background: #f5f5f5;
}
#style-3::-webkit-scrollbar-thumb{
background: #f90;
background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.2) 75%, transparent 75%, transparent);
}
#style-4::-webkit-scrollbar-track{
background: #f5f5f5;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#style-4::-webkit-scrollbar{
width: 10px;
background: #f5f5f5;
}
#style-4::-webkit-scrollbar-thumb{
background: #aaa;
background-image: -webkit-linear-gradient(90deg, rgba(0,0,0,.2) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.2) 75%, transparent 75%, transparent);
}
#style-5::-webkit-scrollbar-track{
background: #f5f5f5;
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#style-5::-webkit-scrollbar{
width: 10px;
background: #f5f5f5;
}
#style-5::-webkit-scrollbar-thumb{
background: #3366ff;
background-image: -webkit-linear-gradient(90deg, rgba(255,255,255,.5) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.5) 50%, rgba(255,255,255,.5) 75%, transparent 75%, transparent);
}now you’ve successfully created these Pure CSS Scrollbar. If your code does not work or facing any error/problem to comment down or contact us through the contact page. otherwise, you can download all source code.
