JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="parent">
  <div class="kid">
  </div>
</div>

CSS

#parent {
  height: 120px;
  overflow: auto;
  background: yellow;
  padding: 50px;
}

.kid {
  height: 150px;
  background: green;
  opacity: 1;
  padding: 20px;
  color: #fff;
  font-family: sans-serif;
}

JavaScript

$('#parent').scroll(function() {
	var number = 1 + Math.floor(Math.random() * (12));
	$('#parent').attr('data-spin', number);
	$('.kid').html('<strong>number:</strong> ' + number + '<br><strong>data:</strong> ' + $('#parent').attr('data-spin'));
});