How to Design a Custom Scrollbar

How to Design a Custom Scrollbar

In this blog, we will learn, how to design a custom scrollbar on a website. Nowadays custom scrollbar is trending, most websites use custom-designed scrollbar rather than default scrollbar. Custom scrollbar enhances our website look.


Let’s see the following properties of the scrollbar:

  1. ::-webkit-scrollbar:- This property is used to give width to the scrollbar.
  2. ::webkit-scrollbar-track:-  This property is used to design scrollbar track. We can give background color, border, shadow, etc.
  3. ::webkit-scrollbar-thumb:-  This property is used to design scroll thumb. We can give background color, border-radius to the thumb.
  4. ::webkit-scrollbar-button:-  This property is used to style a little bit part of the top and bottom of the scrollbar. We can give background color to this property. This property is rare used in a website.
  5. ::webkit-scrollbar-track-piece:- It covers the part of the scrollbar that is not covered by the thumb.
  6. ::webkit-scrollbar-corner:-  It is the point where horizontal and vertical scrollbars meet.




Example:


<!DOCTYPE html>
<html>
<head>
<style>
 
.main
{
width:100%;
height:1000px;
background:#ddd;
}
 
::-webkit-scrollbar {
    width: 8px
}
 
 ::-webkit-scrollbar-track {
    background: #888
}
 
 ::-webkit-scrollbar-thumb {
    background: #f1f1f1
}
 
::-webkit-scrollbar-button
{
background:#f00;
}
 
 
 
</style>
</head>
 
<body>
<div class="main">
<p>WDI (Web Development Institute) is registered as Training Institute as well as is
located in Delhi Area recognized for offering specialist training throughout the world.
We provide a diploma as well as certification training courses in the field of Web Designing,
Digital Marketing, along with Web Development. Our training course curriculum is planned to equip you
with relevant information regarding the best and most current developments that are being made use of in the sector.</p>
</div> </body> </html>