JSFiddle - React, Tailwind, and code Playground

HTML

<div id="result"></div>

JavaScript

var selectedParagraph = "";
var scrolled = true;
$(document).ready(function () {
    $(window).on('scroll', function () {
        console.log('inside scroll event handler');
        console.log(scrolled);
        if (scrolled) {
            console.log("User manual scrolled.");
        } else {
            console.log("Added Content");
            scrolled = true;
        }
    });

    $(document).on("click", ".para", function () {
        var divHeight = $(this).offset().top;
        $(window).scrollTop(divHeight);
        selectedParagraph = $(this).attr("id");
    });

    $(document).on("click", "#btnAddContent", function () {
        AddContent();
    });

    init();
});



function AddContent() {
    $(".UnloadedPara").each(function () {
        //console.log();
        $(this).replaceWith("<div>This is some new paragraph</div>");
    });

    if (selectedParagraph != "") {
        var divHeight = $("#" + selectedParagraph).offset().top;
        scrolled = false;
        console.log(scrolled);
        $(window).scrollTop(divHeight);
    }
}


function init() {
    var UnloadedPara = 1000;
    var TotalPara = 10000;
    for (var i = 0; i < TotalPara; i++) {
        if (i > UnloadedPara) {
            $("#result").append("<div id='p" + i + "' class='para'>This is some paragraph " + i + "</div>");
        } else {
            $("#result").append("<div id='p" + i + "' class='UnloadedPara'></div>");
        }

        if (i + 1 == TotalPara) {
            $("#result").append("<button id='btnAddContent'>Add Content on top</div>");
        }
    }
}