Detect scrolling event on listview with winjs

Question

I need to load more items as soon as the user scroll to the end of my list view.

I tried to use the microsoft sample : http://code.msdn.microsoft.com/windowsapps/ListView-loading-behaviors-718a4673/view/SourceCode (scenario 2) but it seams that list view have not the same behavior in windows phone 8.1.

When I run the sample I can see that only viewable contents are loaded (eg 5items of 50). But for windows phone it does load all items.

I use this code :

listView.winControl.itemTemplate = this.incrementalTemplate;
incrementalTemplate: function (itemPromise, recycledElement) {
    if (!recycledElement) {
        recycledElement = document.createElement('div');
    }
    var renderComplete = itemPromise.then(function (item) {

        console.log(item.index);


        itemTemplate.winControl.render(item.data, recycledElement);
        return item.ready;
    }).done(function (item) {
        console.log("clp"+item.index);

    });
    return { element: recycledElement, renderComplete: renderComplete };
},

Items are loaded asynchronusly. I can see in my console that it print 50 times the index and 50times the clp+index. Even if my list just show 5 items at a time.

Also it seems that my listview never fired the loading state event

listView.addEventListener("loadingstatechanged", function (args) {
    //never fired
}, false);

Answer 1

The listview is in a hub, the solution was to add an onscroll event on the win pivot item:

 document.querySelector(".win-pivot-item-content").onscroll = function () {
                if (self.scrollAtBottom(this) === true) {
                    //load more
                }
            };

   scrollAtBottom : function(element){
        return element.scrollHeight - element.scrollTop === element.clientHeight
    },