Google News
logo
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 :