JSFiddle - React, Tailwind, and code Playground

by TrueBlueAussie

HTML

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

JavaScript

var selectedParagraph = "";

$(document).ready(function () {

    $(window).on('scroll', function () {
        console.log("User manual scrolled.");
    });

    $(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() {
    var height = $('#result').height();
    console.log("height: " + height);
    $(".UnloadedPara").each(function () {
        //console.log();
        $(this).replaceWith("<div>This is some new paragraph</div>");
    });

    var newHeight = $('#result').height();
    $(window).scrollTop($(window).scrollTop() + newHeight - height);
}


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>");
        }
    }
    $("#result").append("<button id='btnAddContent'>Add Content on top</div>");
}