endless scroll

by grippstick

HTML

<script src="https://aligntoday.com/Kendo/js/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
<div id='container'>
    <ul data-bind='source:items,events:{scroll:scrollList}'></ul>
</div>

CSS

ul {
    height:100px;
    border: 1px solid;
    overflow:auto;
}

JavaScript

var container = $('#container');
var generate = function (startIndex, stopIndex) {
    var arr = [];
    for (var i = startIndex; i <= stopIndex; i++) {
        arr.push(i);
    }
    return arr;
};

var vm = new kendo.observable({
    pageSize: 50,
    page: 1,
    items: [],
    scrollList: function (e) {
        var ul = e.target;

console.warn(ul.offsetHeight + ul.scrollTop);
console.warn(ul.scrollHeight);
         if (ul.offsetHeight + ul.scrollTop >= ul.scrollHeight) {
            console.warn('paging');
            vm.set('page', vm.page + 1);
            var page = vm.page;
            var startIndex = (page - 1) * vm.pageSize + 1;
            var stopIndex = startIndex + vm.pageSize - 1;
            addItems(startIndex, stopIndex);
        }
    }
});

var addItems = function (startIndex, stopIndex) {
    var arrNew = generate(startIndex, stopIndex);
    arrNew.forEach(function (item) {
        vm.items.push(item);
    });
}

kendo.bind(container, vm);


addItems(1, 50);