Custom Scrollbar

by steveukx

HTML

<div>
    <ul></ul>
</div>

CSS

ul::-webkit-scrollbar {
    background: transparent;
    width: 10px;
}
ul:hover::-webkit-scrollbar {
    background: rgba(0,0,0,0.02);
}
ul:hover::-webkit-scrollbar:hover {
    background: rgba(0,0,0,0.05);
}
ul:hover::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}
ul:hover::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.2);
}

ul {
    list-style-type: none;
    width: 300px;
    overflow: auto;
    overflow-x: hidden;
    height: 150px;
    font-family: verdana;
    font-size: 8pt;
}
li {
    margin: 2px 0;
    text-align: center;
}
li span {
    background: black;
    display: inline-block;
    height: 1em;
}

JavaScript

var ul = document.getElementsByTagName('ul')[0];
var Li = document.createElement('li');
Li.appendChild(document.createElement('span'));

for(var i = 0; i < 100; i++) {
    var li = Li.cloneNode(true);
    li.firstChild.style.width = (100*Math.random()) + '%';
    ul.appendChild(li);
}