SOURCE

$('.scrollBox').tinyscrollbar();

<div class="demo" style="padding:20px 0">
	<div class="scrollBox">
    <!--这里是滚动条-->
     <div class="scrollbar" style="height: 300px;"><div class="track" style="height: 300px;"><div class="thumb" style="top: 0px; height: 234.375px;"><div class="end"></div></div></div></div>
     <!--这里是内容填充区-->
     <div class="viewport"><div class="overview" style="top: 0px;"><strong>这里是内容，当内容高度不够是，滚动条自动隐藏</strong><br>很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长</div></div>
</div>
</div>

/*
.scrollBox 外围容器
.scrollbar 滚动条的容器
.viewport 内容容器
*/
*{margin:0;padding:0;}
.demo
{ width:520px; height:320px; border:1px solid #ccc; font-family:"Microsoft Yahei"; font-size:14px; line-height:24px; margin: 0 auto}
.viewport { width:480px; height: 300px; overflow: hidden; position: relative;margin: 0 auto }
.overview { list-style: none; position: absolute; left: 0; top: 0; }
.thumb .end,.thumb { background-color: #08c; }
.scrollbar { position: relative; float: right; width: 8px; }
/*滚动条背景样式.track*/
.track { background-color:#c3c3c3; height: 100%; width:8px; position: relative; padding: 0; }
/*滚动条样式.thumb*/
.thumb { height: 20px; width: 8px; cursor: pointer; overflow: hidden; position: absolute; top: 0; }
.thumb .end { overflow: hidden; height: 5px; width: 8px; }
.disable{ display: none; }