WebKit Scrollbar Styling

HTML

<div class="scrollbar">
    <div class="force-overflow">This is test content.</div>
</div>

CSS

/* .scrollbar {
    height: 350px;
    width: 300px;
    background: #F5F5F5;
    overflow-y: scroll;
}
.force-overflow {
    min-height: 450px;
}
::-webkit-scrollbar {
    width:24px;
    height:25px;
}
::-webkit-scrollbar-track:horizontal {
  background: none;
}
::-webkit-scrollbar-thumb {
    border-radius:12px;
    border:20px solid rgba(255, 255, 255, 0);
    background-clip:content-box;
    background-color: #aaa;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #888;
} */


Style 2

::-webkit-scrollbar {
    width:12px;
    height:12px;
}
::-webkit-scrollbar-track {
    background-color: #fff;
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}
::-webkit-scrollbar-thumb {
    border:2px solid rgba(255, 255, 255, 0);
    background-clip:content-box;
    background-color: #aaa;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #888;
}