vue-scrollbars/src/scrollbars/css/dynamic.css

A light vue scrollbar comes from jquery.scrollbar.js

/*************** SCROLLBAR DYNAMIC ***************/

.scrollbar-dynamic > .scroll-element,
.scrollbar-dynamic > .scroll-element div{
    background:none;
    border:none;
    margin:0;
    padding:0;
    position:absolute;
    z-index:10;
}
.scrollbar-dynamic > .scroll-element div{
    display:block;
    height:100%;
    left:0;
    top:0;
    width:100%;
}
.scrollbar-dynamic > .scroll-element.scroll-x{
    bottom:2px;
    height:7px;
    left:0;
    min-width:100%;
    width:100%;
}
.scrollbar-dynamic > .scroll-element.scroll-y{
    height:100%;
    min-height:100%;
    right:2px;
    top:0;
    width:7px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_outer{
    opacity:0.3;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
}
.scrollbar-dynamic > .scroll-element .scroll-element_size{
    background-color:#cccccc;
    opacity:0;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
    -webkit-transition:opacity 0.2s;
    -moz-transition:opacity 0.2s;
    -o-transition:opacity 0.2s;
    -ms-transition:opacity 0.2s;
    transition:opacity 0.2s;
}
.scrollbar-dynamic > .scroll-element .scroll-bar{
    background-color:#6c6e71;
    -webkit-border-radius:7px;
    -moz-border-radius:7px;
    border-radius:7px;
}
/* scrollbar height/width & offset from container borders */

.scrollbar-dynamic > .scroll-element.scroll-x .scroll-bar{
    bottom:0;
    height:7px;
    min-width:24px;
    top:auto;
}
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-bar{
    left:auto;
    min-height:24px;
    right:0;
    width:7px;
}
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_outer{
    bottom:0;
    top:auto;
    left:2px;
    -webkit-transition:height 0.2s;
    -moz-transition:height 0.2s;
    -o-transition:height 0.2s;
    -ms-transition:height 0.2s;
    transition:height 0.2s;
}
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_outer{
    left:auto;
    right:0;
    top:2px;
    -webkit-transition:width 0.2s;
    -moz-transition:width 0.2s;
    -o-transition:width 0.2s;
    -ms-transition:width 0.2s;
    transition:width 0.2s;
}
.scrollbar-dynamic > .scroll-element.scroll-x .scroll-element_size{ left:-4px; }
.scrollbar-dynamic > .scroll-element.scroll-y .scroll-element_size{ top:-4px; }
/* update scrollbar offset if both scrolls are visible */

.scrollbar-dynamic > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size{ left:-11px; }
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size{ top:-11px; }
/* hover & drag */

.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer{
    overflow:hidden;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter:alpha(opacity=70);
    opacity:0.7;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-element_size,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-element_size{
    opacity:1;
}
.scrollbar-dynamic > .scroll-element:hover .scroll-element_outer .scroll-bar,
.scrollbar-dynamic > .scroll-element.scroll-draggable .scroll-element_outer .scroll-bar{
    height:100%;
    width:100%;
    -webkit-border-radius:12px;
    -moz-border-radius:12px;
    border-radius:12px;
}
.scrollbar-dynamic > .scroll-element.scroll-x:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-x.scroll-draggable .scroll-element_outer{
    height:20px;
    min-height:7px;
}
.scrollbar-dynamic > .scroll-element.scroll-y:hover .scroll-element_outer,
.scrollbar-dynamic > .scroll-element.scroll-y.scroll-draggable .scroll-element_outer{
    min-width:7px;
    width:20px;
}