JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<div id="react-root">
<div id="inner" style="height:200px;">
<div style="height:1000px;">

</div>
</div>
</div>

CSS

#react-root{
  height:2000px;
  width:100%;
  background:cyan;
}

#inner{
  overflow-y:scroll;
  border:4px solid red;
}

JavaScript

$('#inner').scroll(function(){

},function(){
console.clear();
console.log("Inner ID: " + $('#inner')[0].scrollTop);
console.log("Window: " + $(window).scrollTop());
console.log("Inner ID Bound: " + $('#inner') [0].getBoundingClientRect().top);
})


$(window).scroll(function(){

},function(){
console.clear();
console.log("React ID: " + $('#react-root')[0].scrollTop);
console.log("Window: " + $(window).scrollTop());
console.log("React ID Bound: " + $('#react-root') [0].getBoundingClientRect().top);
})