JSFiddle - React, Tailwind, and code Playground

HTML

<div class="text" id="text1">Text 1</div>
<div class="big" id="big1">1</div>

<div class="text" id="text2">Text 2</div>
<div class="big" id="big2">2</div>

<div class="text" id="text3">Text 3</div>
<div class="big" id="big3">3</div>

CSS

.big {
    width: 100%;
    height: 2000px;
    /* bigger as viewport - if browser height is not heigher! */
    background: #c5c5c5;
    overflow: hidden;
    font-size: 48px;
}

JavaScript

function isScrolledIntoView(elem) {
    if ($(elem).length == 0) {
        return false;
    }
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();
    //  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); //try it, will only work for text
    return (docViewBottom >= elemTop && docViewTop <= elemBottom);
}

$('.text').each(function () {
    console.log(isScrolledIntoView(this), this);
});
$('.big').each(function () {
    console.log(isScrolledIntoView(this), this);
});

$(window).on('scroll', function () {
    $('.text').each(function () {
        console.log(isScrolledIntoView(this), this);
    });
    $('.big').each(function () {
        console.log(isScrolledIntoView(this), this);
    });
});