JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scroll">
    
</div>

CSS

.scroll {
    overflow: scroll;
    width: 150px;
    height: 200px;
    margin: 100px auto 0;
    border: solid 1px #ccc;
}

JavaScript

var el = $('<p>Test item</p>'),
    container = $('.scroll');

function load(container) {
    for(var i = 0;i<10;i++) {
        $(container).append(el.clone());
    }
}

load(container);
container.on('scroll', function () {
    if (this.scrollHeight - this.clientHeight  <= this.scrollTop) {
        load(container);
    }
})