Append HTML To tinyScroller Plugin

Append HTML to tinyScroller and keep relative position of existing content. http://baijs.nl/tinyscrollbar/

by sbhomra

HTML

<script src="http://baijs.nl/tinyscrollbar/js/jquery.tinyscrollbar.min.js"></script>
<link rel="stylesheet" href="http://www.baijs.nl/css/website.css">
<div id="scrollbar1">
                        <div class="scrollbar"><div class="track"><div class="thumb" ><div class="end"></div></div></div></div>
                        <div class="viewport">
                            <div class="overview">
                               </div>
                        </div>
                    </div>
<br />
<br />
<a id="more" href="#">Add More</a>

JavaScript

$(document).ready(function() {    
    $('#scrollbar1').tinyscrollbar();
    
    var $overview= $(".overview");
    
    var previousFirstItem = "";
    var noMoreRecords = false;
    
    $("#more").click(function() {
        var html = "";
        
        for (i = 0; i < 10; i++) {
            var output = "Item " + i;
            
            //If first item in last iteration equal the first item in
            //the current iteration, exit the loop since we already have
            //this data.
            if (previousFirstItem == output) {
                noMoreRecords = true;
                break;
            }
            
            html += "<p>" + output + "</p>";
                        
            //Store the first item when iterating through records
            if (i == 0) 
                previousFirstItem = output;            
        }
        
        if (!noMoreRecords) {
            $overview.append(html);            
            $('#scrollbar1').tinyscrollbar_update('relative');
        }
        else {
            $(this).text("No More");
        }
            
        
    });
});