JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable-area" style="width:500px;height:500px;overflow:auto">
 <div id="draggable" style="width:5000px;height:5000px">
     <ul>
         <li id="first">HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
<li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li>HELLO</li>
         <li id="last">HELLO</li>         
     </ul>
  </div>
</div>

CSS

li {
    
}

JavaScript

$(document).ready(function(){
    $('#draggable').click(function(){
        var firstOffsetTop = $('#first').offset().top;
        var firstOffsetLeft = $('#first').offset().left;

        if((firstOffsetTop >= 0 && firstOffsetTop <= 500) && (firstOffsetLeft >= 0 && firstOffsetLeft <= 500)) {
            alert("First Li Visible");   
        }else{
            alert("First Li Not Visible");          
        }
    });
});