JSFiddle - React, Tailwind, and code Playground

by NerfAnarchist

HTML

<div id="test"><div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST</div>
    <div>TEST1TEST1TEST1TEST1TEST1</div>
</div>

CSS

#test {
    width: 100%;
    height: 600px;
    border-bottom: 2px solid #000;
    overflow: auto;
}

JavaScript

// this is for adding rows when we scroll to the bottom of the body

$(function () {
   ReplaceVisibleUntilFull();
   $('#test').scroll(function () {
      ReplaceVisible();
   });
});

function ReplaceVisibleUntilFull() {
    var stop = false, i = 0;
    if (HasBeenScrolledTo($('#test').find('div:last'))) {
        while (stop === false && i < 50) {
            if (HasBeenScrolledTo($('#test').find('div:last'))) {
                load_more();
            } else {
                stop === true;
            }
            i = i + 1;
        }
    }
}

function ReplaceVisible() {
    if ($('#test').data('loading') === false &&
        HasBeenScrolledTo($('#test').find('div:last'))) {
        load_more();
    }
}

function HasBeenScrolledTo(elem) {
    var docViewTop = $('#test').scrollTop();
    var docViewBottom = docViewTop + $('#test').height();
    var elemTop = $(elem).offset().top;

    return elemTop < docViewBottom;
}

function load_more() {
    $('#test').data('loading', true);
    $('#test').append('<div>TEST</div><div>TEST</div><div>TEST</div><div>TEST</div><div>TEST</div>');
    $('#test').data('loading', false);
}