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>

Categories: web designing css

Trending Courses

CodeIgniter

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Advance Digital Marketing

Regular : 6 Months

Fastrack : 3 Months

Crash : 2 Months

React JS

Regular : 45 Days

Fastrack : 20 Days

Crash : 7 Days

Laravel

Regular : 45 Days

Fastrack : 20 Days

Crash : 10 Days

Front End Developer

Regular : 7 Month

Fastrack : 4 Month

Crash : 2 Month

Related Blogs

Request For Demo