JSFiddle - React, Tailwind, and code Playground

by kiokotzu

HTML

<div class="padre">
    <div class="bottom"></div>
    <div class="bottom"></div>
    <div class="bottom"></div>
    <div class="bottom"></div>
    <div class="bottom"></div>
    <div class="bottom"></div>
</div>
<div class="content"></div>

CSS

div.content{height:200px; margin:10px 0 1000px 0;background:blue;}
div.bottom{height:100px; margin:10px 0 10px 0; background:black;}
body{margin:0; padding:0;}

JavaScript

var startScroll = $(window).scrollTop();

$(window).scroll(function(){
    var valScroll = $(window).scrollTop();
    var loader_business = $('div.content');
    
    if((valScroll - parseInt(loader_business.css("height")) / 2) >= (loader_business.offset().top - parseInt(loader_business.css("height")))){
        if(valScroll > startScroll){
            $(".padre").append("<div class='bottom'></div>");
            $(window).scrollTop(valScroll);
            valScroll = startScroll;
        }
    }
});