Create custom scrollbar, Custom scrollbars are popular, and you might have come across websites that have unique scrollbars, making the sites feel and look professional. There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS. but I do not like to add more JavaScript to my website. If you are a designer or you just want your website to have a cool scrollbar than go ahead and follow.
CSS Code:
.scrollbar
{
background: #F1F1F1;
float: left;
height: 250px;
width: 100px;
margin-left: 30px;
overflow-y: scroll;
}
.overflow
{
height: 300px;
}
.wrapper
{
text-align: center;
width: 800px;
margin: auto;
}
/* SCROLL STYLE 1*/
.scroll-1::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
border-radius: 15px;
background-color: #F5F5F5;
}
.scroll-1::-webkit-scrollbar-thumb
{
border-radius: 15px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,.3);
background-color: #DC143C;
}
.scroll-1::-webkit-scrollbar
{
width: 15px;
background-color: #F5F5F5;
}
/* SCROLL STYLE 2*/
.scroll-2::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.scroll-2::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,.3);
background-color: #BDB76B;
}
.scroll-2::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
/* SCROLL STYLE 3 */
.scroll-3::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
background-color: #F5F5F5;
}
.scroll-3::-webkit-scrollbar-thumb
{
background-color: #111;
}
.scroll-3::-webkit-scrollbar
{
width: 5px;
background-color: #F5F5F5;
}
/* SCROLL STYLE 4 */
.scroll-4::-webkit-scrollbar-track
{
border: 1px solid black;
background-color: #F5F5F5;
}
.scroll-4::-webkit-scrollbar-thumb
{
background-color: #008080;
}
.scroll-4::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
/* SCROLL STYLE 5 */
.scroll-5::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,255,0.3);
background-color: #F5F5F5;
}
.scroll-5::-webkit-scrollbar-thumb
{
background-color: #800000;
}
.scroll-5::-webkit-scrollbar
{
width: 10px;
background-color: #F5F5F5;
}
HTML Code:
<div class="wrapper">
<div class="scrollbar scroll-1">
<div class="overflow"></div>
</div>
<div class="scrollbar scroll-2">
<div class="overflow"></div>
</div>
<div class="scrollbar scroll-3">
<div class="overflow"></div>
</div>
<div class="scrollbar scroll-4">
<div class="overflow"></div>
</div>
<div class="scrollbar scroll-5">
<div class="overflow"></div>
</div>
</div>