To use custom scroll bar we have to follow below steps.

Steps.

1 - First download tiny scrollbar javascript libarary by using below url.

<pre>http://baijs.nl/tinyscrollbar/</pre>

2 - Include tinyscroll bar library in the Html head tag like.

<script type="text/javascript" src="js/jquery.tinyscrollbar.min.js"></script>

3- Add following code in HTML file.

<div class="scroll">
    <div class="scrollbar">
        <div class="track">
            <div class="thumb">
                <div class="end"></div>
            </div>
        </div>
    </div>
    <div class="viewport">
        <div class="overview">
                          Your  content goes here
        </div>
    </div>
</div>

4 - Add following CSS in css file.

.viewport {
    width: 98%;
    height: 170px;
    overflow: hidden;
    position: relative;
}

.overview
    {
    list-style: none;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    width: 100%;
}

.scrollbar
    {
    background: #f0f0f0;
    position: relative;
    background-position: 0 0;
    float: right;
    width: 8px;
    display: block;
}

.track
    {
    height: 100%;
    width: 7px;
    position: relative;
    padding: 0 1px;
}

.thumb
    {
    background: #cdcdcd;
    height: 20px;
    width: 7px;
    cursor: pointer;
    overflow: hidden;
    position: absolute;
    top: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

.end
    {
    overflow: hidden;
    height: 5px;
    width: 7px;
}

5 - Call following javascript code on page load time, to initialize custom tiny scroll bar.

     $('.scroll').tinyscrollbar();

6 - To apply custom tiny scroll bar on run time added content, use following steps.

        6.1 - Call again below java-script code after content is added at run time .      

           $('.scroll').tinyscrollbar();

Note -- To explore more about tinnyscrollbar please go through following URL.

http://baijs.nl/tinyscrollbar/