JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<div id="viewport">
    <p>1st paragraph</p>
    <p>2nd paragraph</p>
    <p>3rd paragraph</p>
    <p>4th paragraph</p>
    <p>5th paragraph</p>
    <p>6th paragraph</p>
    <p>7th paragraph</p>
    <p>8th paragraph</p>
</div>

<div id="debugRemove"></div>
<br />
<div id="debugAppend"></div>

CSS

#viewport {
    height: 100px;
    overflow: auto;
    border: 1px solid black;
}

p {
    font-size: 1.2em;
}

JavaScript

$("#viewport").scroll(function() {

    // clear the debug divs
    $("#debugRemove, #debugAppend").html("");
    
    $(this).children().each(function (index, paragraph) {
        var $paragraph= $(paragraph);
        if ($paragraph.position().top < $("#viewport").position().top) {
            removeFromDOM ($paragraph);
        } else {
            addToDOM($paragraph);
        }
    });
});

var removeFromDOM = function($elem) {
        $("#debugRemove").html($("#debugRemove").html() + 
                               $elem.html() + 
                               ' was removed from DOM<br />');
    },
    addToDOM = function($elem) {
        $("#debugAppend").html($("#debugAppend").html() + 
                       $elem.html() + 
                       ' was appended to DOM<br />');
};