Dynamic horizontal list

by nhuon

HTML

<div id="postswrapper">
   <div class="item">content</div>
   <div class="item">content</div>
   <div class="item">content</div>
   <div class="item">content</div>
   <div class="item">content</div>
   <div class="item">content</div>
   <div class="item">content</div>    
</div>
<span id="button">More Results</span>
<br/>
<span id="scroll">ScrollLeft</span>
<br/><br/>
<div id="logs"></div>

CSS

#postswrapper
{
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid blue;
}

.item
{
    width: 100px;
    height: 100px;
    border: 1px solid red;
    display: inline-block;
}

JavaScript

var wrap = $("#postswrapper")
var item = "<div class='item'>content</div>"

function log(msg) {
    $("#logs").append("<p>" + msg + "</p>");
}

function clearlog() {
    $("#logs").text("");
}


$("#button").click(function() {
    clearlog();
    log(wrap.scrollLeft() + " " + wrap.width() + " " + wrap[0].scrollWidth);
    wrap.append(item);
    log(wrap.scrollLeft() + " " + wrap.width() + " " + wrap[0].scrollWidth);
    wrap.scrollLeft(wrap[0].scrollWidth - wrap.width());
    log(wrap.scrollLeft() + " " + wrap.width() + " " + wrap[0].scrollWidth);
});

wrap.scroll(function() {
    clearlog();
    log(wrap.scrollLeft() + " " + wrap.width() + " " + wrap[0].scrollWidth);
    if ((wrap.scrollLeft() + wrap.width()) == wrap[0].scrollWidth) {
        wrap.append(item);
    }
    scrollLeft = wrap.scrollLeft();
});