JSFiddle - React, Tailwind, and code Playground

HTML

<button onclick="getScrollHeight(100)"> Height:100px </button>    
<button onclick="getScrollHeight(500)"> Height:500px </button>
<pre id="p">This element scroll height is 500</pre>
<div id="d">
    div<br>div<br>div<br>div<br>div<br>div<br>
    div<br>div<br>div<br>div<br>div<br>div<br>
    div<br>div<br>div<br>div<br>div<br>div<br>
</div>

CSS

div{
    height:500px;
    width:500px;
    overflow-y:scroll;
    background:red;
}

JavaScript

function getScrollHeight(height){
var d = document.getElementById("d");
d.style.height = height + "px";
document.getElementById("p").innerHTML = "This element scroll height is " + d.scrollHeight;
}