JSFiddle - React, Tailwind, and code Playground

by clemskie

HTML

<div id='container' style='border: solid 1px gray;height:100px;overflow:auto;'>
    <table id='theTable'>
        <thead>
            <th>ID</th>
            <th>NAME</th>
        </thead>
        <tbody></tbody>
    </table>
</div>
<button onclick='MyPageController.loadInitialDisplay();'> Reset
</button>

JavaScript

window.MyPageController = {
    recordsPerPage: 5,
    rowCtr: 0,
    container: $('#container'),
    theTable: $('#theTable'),
    clearTable: function () {
        $(theTable).children('tbody').remove();
    },
    loadInitialDisplay: function () {
        this.container.scrollTop(0);
        this.rowCtr = 0;
        this.clearTable();
        this.loadNextSetOfRecords();
    },
    loadNextSetOfRecords: function () {
        for (var i = 1; i <= this.recordsPerPage; i++) {
            this.rowCtr++;
            var tr = $('<tr />');
            var tdID = $('<td />', {
                html: this.rowCtr
            });
            var tdName = $('<td />', {
                html: 'Name' + this.rowCtr
            });
            tr.append(tdID, tdName);
            $(theTable).append(tr);
        }
    }
};

function scrollHandler(container) {
    var st = container.scrollTop;
    var scrollHeight = container.scrollHeight;
    var containerHeight = container.clientHeight;
    if (st >= scrollHeight - containerHeight) {
        MyPageController.loadNextSetOfRecords();
    }
}

$(function () {
    MyPageController.loadInitialDisplay();
    MyPageController.container.on('scroll', function(event){
          scrollHandler(this);
    });
});