styling scroll bar

by oktaviardi pratama

HTML

<div class="test slider1">
    <p>asda</p>
</div>
<div class="test slider2">
    <p>asda</p>
</div>
<div class="test slider3">
    <p>asda</p>
</div>

CSS

body{
background:#333;
color:#fff;  
    padding:50px;
}
.test{
    width:100px;
    height:200px;
    overflow-y:scroll;
    display:inline-block;
}
.test p {
    background: #fff;
    color:#333;
    width:100%;
    display:inline-block;
    height:500px;
}
.test.slider1::-webkit-scrollbar {
    width: 12px;
}
.test.slider1::-webkit-scrollbar-button {}
.test.slider1::-webkit-scrollbar-track  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
    background:#fff;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
}
.test.slider1::-webkit-scrollbar-track-piece {}
.test.slider1::-webkit-scrollbar-thumb  {
    background-color: darkgrey;
    outline: 1px solid slategrey;
}
.test.slider1::-webkit-scrollbar-corner {}
.test.slider1::-webkit-scrollbar {}
.test.slider1::-webkit-resizer{} 


.test.slider2::-webkit-scrollbar {
    width: 12px;
}
.test.slider2::-webkit-scrollbar-button {}
.test.slider2::-webkit-scrollbar-track  {
    border-left:none;
    background:#FAFAFA;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
}
.test.slider2::-webkit-scrollbar-track-piece {}
.test.slider2::-webkit-scrollbar-thumb  {
    background-color: #607D8B;
    -webkit-border-radius: 0 0 0 0;
    border-radius: 0 0 0 0;
    border:none;
    height: 10px;
}
.test.slider2::-webkit-scrollbar-corner {}
.test.slider2::-webkit-scrollbar {}
.test.slider2::-webkit-resizer{} 


.test.slider3::-webkit-scrollbar { width: 3px; height: 3px;}
.test.slider3::-webkit-scrollbar-button {  background-color: #666; }
.test.slider3::-webkit-scrollbar-track {  background-color: #999;}
.test.slider3::-webkit-scrollbar-track-piece { background-color: #ffffff;}
.test.slider3::-webkit-scrollbar-thumb { height: 50px; background-color: #666; border-radius: 3px;}
.test.slider3::-webkit-scrollbar-corner { background-color: #999;}}
.test.slider3::-webkit-resizer { background-color: #666;}

JavaScript

masa