JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<body>
<div class="logs">
  <div id="update"><span>Scroll in the red!</span></div>
  <div>html scroll<span id="htmlScroll"></span></div>
  <div>body scroll<span id="bodyScroll"></span></div>
  <div>inner scroll<span id="innerScroll"></span></div>
  <div>html rect top<span id="htmlTop"></span></div>
  <div>body rect top<span id="bodyTop"></span></div>
  <div>inner rect top<span id="innerTop"></span></div>
</div>

<div id="inner" style="height:1000px;"></div>
</body>

CSS

html {
  overflow-y:scroll;
  height: 100%;
}

body {
  height: 100%;
  overflow: scroll;
  margin: 0;
  padding: 0;
  background:blue;
}

#inner{
  height:1000px;
  background: -webkit-linear-gradient(red, yellow);
  background: -o-linear-gradient(red, yellow);
  background: -moz-linear-gradient(red, yellow);
  background: linear-gradient(red, yellow);
}

span{
  margin-left: 20px;
}

.logs{
  position: absolute;
  top: 10px;
  background-color: white;
}
#update{
  width: 100%;
  text-align: center;
  margin: 20px;
}
#update span{
  border: solid 2px green;
  border-radius: 4px;
  background-color: white;
  padding: 10px;
}

JavaScript

var update = function() {
	$('#htmlScroll').html($(window).scrollTop());
  $('#bodyScroll').html($('body')[0].scrollTop);
  $('#innerScroll').html($('#inner')[0].scrollTop);
  
  
	$('#htmlTop').html($('html')[0].getBoundingClientRect().top);
  $('#bodyTop').html($('body')[0].getBoundingClientRect().top);
  $('#innerTop').html($('#inner')[0].getBoundingClientRect().top);
}

setInterval(update, 100);