JSFiddle - React, Tailwind, and code Playground

by Ea Bangalore

HTML

<div id="a"><span id="b">WHERE AM I?</span></div>
<div id="tall">&nbsp;</div>
<pre></pre>

CSS

html { border:1px solid red; padding:2px }
body { border:4px solid blue; padding:8px }
#a { padding:16px }
#b { background:yellow }
pre { position:fixed; left:15em; right:1em; top:1em }
#tall { height:2000px }

JavaScript

function position(el){
  for (var pos=[0,0];el;el=el.offsetParent){
    pos[0] +=  el.offsetLeft-el.scrollLeft;
    pos[1] +=  el.offsetTop-el.scrollTop;
  }
  return pos; 
} 

var pre = document.querySelector('pre');
var b   = document.querySelector('#b');
window.onscroll = function(){
  var r   = b.getBoundingClientRect();
  pre.innerHTML = "position(): "+JSON.stringify(position(b))+
      "\nclientRect: {" + 
      "\n  left:  "+r.left+
      "\n  top:   "+r.top+
      "\n  right: "+r.right+
      "\n  bottom:"+r.bottom+
      "\n  width: "+r.width+
      "\n  height:"+r.height+
      "\n}";
}
window.onscroll()