JSFiddle - React, Tailwind, and code Playground

HTML

<section id="main">
  <div id="circle"></div>
  <div class="spacing"></div>
</section>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding:0;
}



#main {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30px 0;
  border: 3px solid green;
  overflow: scroll;
}

#circle {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: scale(0.1);
  border-radius: 50%;
}

.spacing {
  height: 150vh;
}

JavaScript

const main = document.getElementById('main');
const circle = document.getElementById('circle');

document.getElementsByTagName('body')[0].onscroll = () => {

  const elHeight = main.clientHeight;
  console.log(elHeight);
	// need to convert elHeight into 100 percent and replace "scale(percent)".
  circle.style.transform = "scale(0.5)";
};