JSFiddle - React, Tailwind, and code Playground

HTML

<body style="overflow:hidden;">
<div id="outer" style="position:absolute;left:150px;top:20px;right:100px;bottom:30px;overflow:hidden;border:1px solid blue;">
    <div id="inner" style="position:relative;height:300px;border:1px solid red;width:100px;overflow-y:auto;overflow-x:hidden;">
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">1</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">2</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">3</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;background:yellow;" class="test" id="id1">4</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">5</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">6</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">7</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">8</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">9</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">10</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">11</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">12</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">13</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">14</div>
    </div>
</div>
<div id="result" style="position:absolute;bottom:0px;overflow:hidden;border:1px solid black;height:20px;width:100%;"></div>
</body>

JavaScript

$(document).ready(function () {
	
	    $.belowthefold = function (lookIn, elements, settings) {
	        var fold = $(lookIn).height() + $(lookIn).scrollTop();
	        return $(elements).filter(function () {
	            return fold <= $(this).offset().top - settings.threshold;
	        });
	    };

	    $.abovethetop = function (lookIn, elements, settings) {
	        var top = $(lookIn).scrollTop();
	        return $(elements).filter(function () {
	            return top >= $(this).offset().top + $(this).height() - settings.threshold;
	        });
	    };

	    $.rightofscreen = function (lookIn, elements, settings) {
	        var fold = $(lookIn).width() + $(lookIn).scrollLeft() + $(lookIn).offset().width;
	        return $(elements).filter(function () {
	            return fold <= $(this).offset().left - settings.threshold;
	        });
	    };

	    $.leftofscreen = function (lookIn, elements, settings) {
	        var left = $(lookIn).scrollLeft();
	        return $(elements).filter(function () {
	            return left >= $(this).offset().left + $(this).width() - settings.threshold;
	        });
	    };

	    $("#inner").scrollTop(100);

	    var b = $.belowthefold("#inner", ".test", { threshold: 0 }).toArray();
	    var t = $.abovethetop("#inner", ".test", { threshold: 0 }).toArray();
	    var r = $.rightofscreen("#inner", ".test", { threshold: 0 }).toArray();
	    var l = $.leftofscreen("#inner", ".test", { threshold: 0 }).toArray();


	    var el = $("#id1")[0];
	    
	    var bS = "below the fold : ";
	    for (var i = 0; i < b.length; i++) {
	        bS += $(b[i]).html() + ",";
	    }
	    var tS = "above the top : ";
	    for (var i = 0; i < t.length; i++) {
	        tS += $(t[i]).html() + ",";
	    }
	    var rS = "right of screen : ";
	    for (var i = 0; i < r.length; i++) {
	        rS += $(r[i]).html() + ",";
	    }
	    var lS = "left of screen : ";
	    for (var i = 0; i < l.length; i++) {
	        lS += $(l[i]).html() + ",";
	    }

	   ...