JSFiddle - React, Tailwind, and code Playground

HTML

<div id="scrollable">
<div id="test">

</div>
</div>

CSS

#test{
  position:absolute;
  top:0px;
  left:0px;
  width:100px;
  height:100px;
  border: 1px solid red;
  box-sizing: border-box;
}

#scrollable {
  position:relative;
  width:5000px;
  height:50000px;
}

JavaScript

setInterval(function(){
alert(percVisible(document.getElementById("test")));
}, 5000);


function percVisible(el) {
  const rect = el.getBoundingClientRect();
  const windowHeight = (window.innerHeight || document.documentElement.clientHeight);
  const windowWidth = (window.innerWidth || document.documentElement.clientWidth);

  const left = Math.max(rect.left, 0);
  const right = Math.min(rect.right, windowWidth);
  const bottom = Math.min(rect.bottom, windowHeight);
  const top = Math.max(rect.top, 0);

  if (left < right && bottom > top) {
    return (right - left) * (bottom - top) / ((rect.right - rect.left) * (rect.bottom - rect.top));
  }
  return 0;
}