Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to call custom scrollbar dynamically

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 351
    Comment on it

    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/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: