JSFiddle - React, Tailwind, and code Playground

by Amal Das

HTML

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

CSS

html, body{
    height:100%; width:100%;
}

div {
    position:relative;
    width:100px;
    height:100px;
    background:pink;
    margin:10px;
}


.seen{
    border:2px solid red;
}

JavaScript

$(function () {
    $(window).scroll(function () {
        var first = null;
        
        $("div").each(function(){debugger;
            if( isScrolledIntoView($(this)) && !first) {
                first = $(this);
                first.addClass("seen")
            }            
            else
               $(this).removeClass("seen");
        });        
        
    });

    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
});