CSS Scrollbars
The scrollbar set of CSS properties is a proprietary style hook from Internet Explorer 5.5, which let designers create custom themes for the browser's native scrollbars.

The -webkit-scrollbar family of properties consists of seven different pseudo-elements that, together, comprise a full scrollbar UI element:

1. ::-webkit-scrollbar addresses the background of the bar itself. It is usually covered by the other elements.

2. ::-webkit-scrollbar-button addresses the directional buttons on the scrollbar.

3. ::-webkit-scrollbar-track addresses the empty space “below” the progress bar.

4. ::-webkit-scrollbar-track-piece is the top-most layer of the the progress bar not covered by the draggable scrolling element (thumb).

5. ::-webkit-scrollbar-thumb addresses the draggable scrolling element that resizes depending on the size of the scrollable element.

6. ::-webkit-scrollbar-corner addresses the (usually) bottom corner of the scrollable element, where two scrollbars might meet.

7. ::-webkit-resizer addresses the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.
CSS Scrollbars
<!DOCTYPE html>  
<html>  
<head>  
<title>CSS Scroll Bars</title>
<style type="text/css">  
 
.scrollbar{
margin-left: 20px; 
float: left; 
height: 300px; 
width: 45px; 
background: #F5F5F5; 
overflow-y: scroll; 
margin-bottom: 25px;
}
 
.force-overflow{min-height: 450px; }
 
#wrapper {text-align: center; width: 100%; margin: auto; }
 
#style-1::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
border-radius: 5px; 
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar{
width: 12px; 
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb{ 
border-radius: 5px; 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
background-color: #555;
}
 
#style-2::-webkit-scrollbar-track{ 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
border-radius: 10px; 
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar{
width: 12px; 
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px; 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
background-color: #D62929;
}
 
#style-3::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar{
width:6px; background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb{ 
background-color: #000000; 
}
 
#style-4::-webkit-scrollbar-track{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar{
width: 10px; background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb{
background-color: #0ae; 
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
 
</style>
 
<script type="text/javascript">
$(document).ready(function () {
          if (!$.browser.webkit) {
              $('.wrapper').html('<p>Sorry! Non webkit users. :(</p>');
          }
      });
</script>
 
</head>  
<body>  
 
<div id="wrapper">
 
   <div class="scrollbar" id="style-default">
  <div class="force-overflow"></div>
   </div>
 
    <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>
 
  
</body>  
</html> 
Output :

We see you’re using an ad blocker.

Our website is made possible by displaying ads to our visitors.

Please help us continue to provide you with free. So please disabling your ad blocker.