JSFiddle - React, Tailwind, and code Playground

by vikikamath

HTML

<!--<div id="j" class="inviewport">
Inviewport
</div>
<div id="pusher" class="pusher">

</div>
<div id="j" class="outviewport">
OutofViewport
</div>
-->

CSS

/*.pusher {
  height: 10000px;
}
.outviewport {
  bottom: 0px;
  max-height:100px;
}

.inviewport {
  top: 0px;
}*/

JavaScript

function insertDiv(divId, divStylesStr, divStyleKey, divText){
			var head = document.getElementsByTagName('head')[0];
		  	var body = document.getElementsByTagName('body')[0];
			var div = document.createElement('div');
		  	var divStyle = document.createElement('style');
		  	div.innerHTML = divText;
		  	div.id = divId;
		  	divStyle.innerHTML = divStylesStr;
		  	head.appendChild(divStyle);
		  	body.appendChild(div);
		  	div.className = divStyleKey;
		}
    
insertDiv("one", ".outviewport {bottom: 0px;max-height:100px;}", "outviewport", "Out of view");