JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="scrollbox">
        <div id="page_1" class="pagina">rr</div>
        <div id="page_2" class="pagina">rr</div>
        <div id="page_3" class="pagina">rr</div>
        <div id="page_4" class="pagina">rr</div>
        <div id="page_5" class="pagina">rr</div>
        <div id="page_6" class="pagina">ee</div>
        <div id="page_7" class="pagina">rr</div>
        <div id="page_8" class="pagina">rr</div>
        <div id="page_9" class="pagina">rr</div>
        <div id="page_10" class="pagina">rr</div>
        <div id="page_11" class="pagina">ee</div>
        <div id="page_12" class="pagina">rr</div>
        <div id="page_13" class="pagina">rr</div>
        <div id="page_14" class="pagina">rr</div>
        <div id="page_15" class="pagina">rr</div>
        <div id="page_16" class="pagina">ee</div>
        <div id="page_17" class="pagina">rr</div>
        <div id="page_18" class="pagina">rr</div>
        <div id="page_19" class="pagina">rr</div>
        <div id="page_20" class="pagina">rr</div>
        <div id="page_21" class="pagina">ee</div>
        <div id="page_22" class="pagina">rr</div>
        <div id="page_23" class="pagina">rr</div>
        <div id="page_24" class="pagina">rr</div>
        <div id="page_25" class="pagina">rr</div>
        <div id="page_26" class="pagina">ee</div>        
    </div>
</body>

JavaScript

$(window).scroll(function () {
        //- 10 = desired pixel distance from the bottom of the page while scrolling)
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
            var box = $("#scrollbox");
            //Just append some content here
            box.html(box.html() + "<br />fa");
        }
});