JSFiddle - React, Tailwind, and code Playground

by rough cheap

HTML

<div class="obox">
  <div class="vertical">
    Bounding Rect Test.
  </div>
</div>
<div class="obox">
  <div class="vertical">
    Bounding Rect Test.
  </div>
</div>
<div class="obox">
  <div class="vertical">
    Bounding Rect Test.
  </div>
</div>
<div class="obox">
  <div class="vertical">
    Bounding Rect Test.
  </div>
</div>
<div class="obox">
  <div class="vertical">
    Bounding Rect Test.
  </div>
</div>

CSS

.obox {
  background-color: rgba(40, 40, 190, 255);
  border: 4px solid rgb(29, 29, 120);
  color: white;
  width: 350px;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  margin-top: 1000px;
  margin-bottom: 1000px;
  box-sizing: border-box;
}

JavaScript

let elements;

window.addEventListener('load', (e) => {
	elements = document.getElementsByClassName('obox');
}, false);

document.addEventListener('scroll', (e) => {
	for (let i = 0; i < elements.length; i++) {
  	let target = elements.item(i);
  	let rect = target.getBoundingClientRect();
    let msg = `Top: ${rect.top}<br>`
    	+ `left: ${rect.left}<br>`
    	+ `right: ${rect.right}<br>`
    	+ `bottom: ${rect.bottom}<br>`
    	+ `x: ${rect.x}<br>`
    	+ `y: ${rect.y}<br>`
    	+ `width: ${rect.width}<br>`
    	+ `height: ${rect.height}<br>`
      + `scrollX: ${window.scrollX}<br>`
    	+ `scrollY: ${window.scrollY}<br>`;
    target.children[0].innerHTML = msg;
  }
}, false);