JSFiddle - React, Tailwind, and code Playground

by crduling

HTML

<div class='outer'>

<div class='inner'></div>

<button class='showContentBtn'>Show content</button>

</div>




<div class='result'>

</div>

CSS

html, body {
  height: 100%;
}

.outer {
  border-style: solid; 
  height: 50%;
}

.inner {
  border-style: solid;
  width: 50%;
  margin-top: 5%;
  margin-left: 25%;
  margin-right: 25%;
  height: 50%;
  overflow: auto;
}

.showContentBtn {
  width: 15%;
  height: 20%;
  margin-top: 2%;
  margin-left: 42.5%;
  margin-right: 42.5%;
}

.result {
  border-style: none;
  margin-top: 5%;
  width: 10%;
}

JavaScript

$("button").click(function() {

	var content = "<div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div><div>Content</div>";

	$(content).appendTo(".inner");
  
  $(".inner").scroll(function() {
	
  	$(".result").html($(".inner").scrollTop());
	
	});

});