JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

div {
    display: block;
    width: 600px;
    height: 100px;
    color: #555;
    background-color: #DDD;
    border: 2px solid #555;
    margin-bottom: 5px;
}

JavaScript

var inserted = 0;
$(window).on("scroll", function(e) {
    var scrollTop = $(window).scrollTop() + $(window).height();
    var documentHeight = $(document).outerHeight();    
    if ((scrollTop / documentHeight) * 100 > 98 && ++inserted <= 10) {
        $(document.body).append("<div>Getting new contents</div>");
    }
    else if ((scrollTop / documentHeight) * 100 == 100) {
        console.log("Finished adding contents");
    }
});