stuff.js

//  Enables progressive rendering of children by keeping track of indices which are currently rendered.
minRenderedIndex: 0,
maxRenderedIndex: 25,

addItemView: function(item, ItemView, index) {
    if (index >= this.minRenderedIndex || index < this.maxRenderedIndex) {
        Backbone.Marionette.CompositeView.prototype.addItemView.apply(this, arguments);
    }
},



this.ui.itemContainer.scroll(function () {

    var scrollTop = $(this).scrollTop();
    
    if (scrollTop >= 500) {

        var nextBatch = self.collection.slice(self.maxRenderedIndex, self.maxRenderedIndex + 25);
        console.log("nextBatch", nextBatch);

        self.maxRenderedIndex += 25;

    }

    console.log("Scroll top:", $(this).scrollTop());
});

more like this:

var scrollTop = $(this).scrollTop();

            if (scrollTop >= 500) {

                var nextBatch = self.collection.slice(self.maxRenderedIndex, self.maxRenderedIndex + 25);
                console.log("nextBatch", nextBatch, nextBatch.length);

                self.initRenderBuffer();

                self.startBuffering();

                var ItemView;
                _.each(nextBatch, function (item, index) {
                    ItemView = this.getItemView(item);
                    this.addItemView(item, ItemView, index);
                }, self);

                self.endBuffering();

                self.maxRenderedIndex += 25;

            }