Question

I am looking for a solution to display many items (10’s of thousands) in a list view in Yii. I would like to be able to display them in a continually scrollable list. Here is the catch, when the user scrolls past the end of the list I want the new data to replace the data he just scrolled passed. Kind of like google music if you have a really long play list.

I looked at Yiinfinite-scroller but it appends to the end of the list making a very long list which is killing my memory usage.

Thanks

Answer 1

Its actuality really easy to implement infinite scroll in just a few lines of js and with the help of jQuery. Measure the height of the content div and as the page scrolls subtract the scroll difference from the divs height then when it hit the min amount do the query for more content and reset the height counter and repeat:

<script type="text/javascript">
var contentHeight = 4000,;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 1;

function scroll(){
    if(navigator.appName == "Microsoft Internet Explorer")
        scrollPosition = document.documentElement.scrollTop;
    else
        scrollPosition = window.pageYOffset;

    if((contentHeight - pageHeight - scrollPosition) < 500){
        $.ajax({ url: "./yourAPI/?next="+n, cache: false,
        success: function(data){
            //append result
            $('#infscroll').append('<div>'+data.result+'</div>');
        }, dataType: "json"});
        n += 1;
        contentHeight += 4000;
    }
}

$(document).scroll(function(){
    setInterval('scroll();', 250);
});
</script>

<div id="infscroll"></div>