JSFiddle - React, Tailwind, and code Playground

by abhitalks

HTML

<span id='counter' style='position:absolute;left:340px;top:200px;'></span>
    <div class='d' style="border:solid 0px red;height:400px;overflow:hidden;overflow-y:scroll;width:200px;position:absolute;left:100px;top:60px;border:solid 1px red;"> 

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box  "></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<div class="box orange"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box  "></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box  "></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div><div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box  "></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
      </div>

CSS

* { box-sizing: border-box; margin:0; padding:0; }
.box {
    width: 50px;
    height: 30px;
    margin-bottom: 20px;
    background:lightgray;    
}
.orange {
    background: orange;   
}


.box1
{
  background-color:orange;
}

JavaScript

$.fn.isOnScreen = function ()
			{

				var win =$(".d");
 
				var viewport = {
					top: win.offset().top,
					left: win.offset().left
				};
				viewport.right = viewport.left + win.width();
				viewport.bottom = viewport.top + win.height();

				var bounds = this.offset();
				bounds.right = bounds.left + this.outerWidth();
				bounds.bottom = bounds.top + this.outerHeight();

				return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));

			};
var i=0;
$(".d").on('scroll',function (){ 
 
 
  if ($(".orange").isOnScreen())
  {
    $("#counter").text(i++);
  }

});