How to create infinite iscroll?

Question

I created iScroll on my webpage and it was working very well. But now i want to make it work as infinite iscroll, but i don't know how to do that.

my iscroll code is:

myCarousel_up = new iScroll('scroller_upCarousel', {
        snap: true,
        momentum: false,
        hScrollbar: false,
                vScrollbar: false,
        desktopCompatibility:true,
        onScrollEnd: function () {

            }
    });

Can anyone help me?

Answer 1

First you need to add iscroll-infinite.js

then you need to write ajax function to load or append data in infinite loop.

function ajax (url, parms) {
parms = parms || {};
var req = new XMLHttpRequest(),
    post = parms.post || null,
    callback = parms.callback || null,
    timeout = parms.timeout || null;

req.onreadystatechange = function () {
    if ( req.readyState != 4 ) return;

    // Error
    if ( req.status != 200 && req.status != 304 ) {
        if ( callback ) callback(false);
        return;
    }

    if ( callback ) callback(req.responseText);
};

if ( post ) {
    req.open('POST', url, true);
    req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
} else {
    req.open('GET', url, true);
}

req.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

req.send(post);

if ( timeout ) {
    setTimeout(function () {
        req.onreadystatechange = function () {};
        req.abort();
        if ( callback ) callback(false);
    }, timeout);
}
}

Also call iScroll loaded function with ajax function

var myScroll;

function loaded () {
myScroll = new IScroll('#wrapper', {
    mouseWheel: true,
    infiniteElements: '#scroller .row',
    //infiniteLimit: 2000,
    dataset: requestData,
    dataFiller: updateContent,
    cacheSize: 1000
});
}

function requestData (start, count) {
ajax('dataset.php?start=' + +start + '&count=' + +count, {
    callback: function (data) {
        data = JSON.parse(data);
        myScroll.updateCache(start, data);
    }
});
}

function updateContent (el, data) {
el.innerHTML = data;
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 

Please refer below link for demo.

http://lab.cubiq.org/iscroll5/demos/infinite/

Answer 2

You could use ajax functoin like:

myCarousel_up = new iScroll('scroller_upCarousel', {
        snap: true,
        momentum: false,
        hScrollbar: false,
        vScrollbar: false,
        desktopCompatibility:true,
        onScrollEnd: function () {
        if($('#scroller_upCarousel').hasClass('scrolling')) {
            $('#scroller_upCarousel').removeClass('scrolling');
        } 
        ajaxActionToGetMoreList(); //Execute custom function(ajax call)
    }
});