It seems that this feature is reasonably popular so here's my quick and easy (just 2 steps) solution that seems to work quite nicely...
Step 1... Add this single line to the relevant Client Scripts > Table-Specific > List Page > Startup Script:
infiniteScroll();
Step 2... Add this code to Client Scripts > Global > Pages with header/footer > Global Code:
function infiniteScroll(delay = 1000, previewCheck = true) { // Refresh period ... 1000 = 1 second
$('form[name="ew-pager-form"]').hide();
if ($('#autoscroll').length == 0)
$('<span id="autoscroll" data-page="1"></span>').insertAfter('table.ew-table');
$.fn.inViewport = function() {
var win = $(window);
var viewport = { top: win.scrollTop(), left: win.scrollLeft() };
viewport.right = viewport.left + win.width();
viewport.bottom = viewport.top + win.height();
var bounds = this.offset();
bounds.right = bounds.left + this.outerWidth();
bounds.bottom = bounds.top + this.outerHeight();
return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};
manageScroll(delay, previewCheck);
function manageScroll(delay, previewCheck) {
if (!((previewCheck && $('.ew-preview-row-btn.icon-collapse').length > 0) || $('.ew-detail-pages').length > 0 || $('.modal.show').length > 0))
{
if ($('#autoscroll').length > 0) {
if ($('#autoscroll').inViewport()) {
page = parseInt($('#autoscroll').attr('data-page'));
pages = parseInt($('input.form-control[name=pageno]').attr('data-pagecount'));
records = parseInt($('input.form-control[name=pageno]').attr('data-pagesize'));
if (page < pages)
{
url = location.href + '?';
url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + (page * records);
$('#autoscroll').attr('data-page', String(page + 1));
$('.ew-preview-row-btn.icon-collapse').trigger('click');
$('table.ew-table > tbody').load(url + ' table.ew-table > tbody tr', function(response, status, xhr) {
if (status == 'success') {
$(this).find('tr:even').removeClass('ew-table-alt-row').addClass('ew-table-row');
$(this).find('tr:odd').removeClass('ew-table-row').addClass('ew-table-alt-row');
$('.ew-preview-row-btn').click(ew.showDetails);
$('div.ew-preview [data-toggle="tab"]').on('show.bs.tab', ew.tabShow);
$('div.popover').hide();
ew.initTooltips();
}
});
url = url.substring(0, url.indexOf('?')) + '?pageno=1&recperpage=' + records;
$.get(url);
}
}
}
}
setTimeout(manageScroll, delay, delay, previewCheck);
}
}
...and then regenerate at least the relevant list page and the userfn.js files.
I suggest that you set the page size to 5 - that seems to be a good number of records to add each time, and the default delay of 1000ms also seems to work quite well, but feel free to experiment.
Be aware that the top and/or bottom paging controls will be removed from view to avoid interfering with the infinite scroll functionality.
As with my list refreshing code, the default is to abort if a preview panel or model dialog is open, but those checks can be overridden as required.
Enjoy!