JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<div id="output"></div>

<div id="sample" class="sampleClass">
  <div>hello</div>
  <div>hello</div>  
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
  <div>hello</div>
</div>

CSS

.sampleClass {
 padding: 0px;
 max-height: 600px;
 overflow-y: auto;
 border: solid blue;
 //margin: 10px 300px 10px 25px;
 margin: 0px
 position: 'relative'
}

JavaScript

//window.addEventListener("resize", updateDimensions);


var originalHeight = document.getElementById('sample').offsetHeight;
var safeBuffer = 15;

function updateDimensions(){
	var node = document.getElementById('sample');
	var windowDimensions = {width: window.innerWidth, height: window.innerHeight};
	var dimensions = node.getBoundingClientRect();
  var nodeBottom = dimensions.bottom;
  var nodeHeight = node.offsetHeight;
  
  var nodeTop = dimensions.top;
  var windowHeight = windowDimensions.height;
  
  var windowIsCutOff = windowHeight <= nodeBottom;
  var windowIsShowing = windowHeight >= nodeTop;
  
  console.log('windowHeight: ' + windowHeight + ' safeBuffer: ' + safeBuffer);
  console.log('nodeHeight: ' + nodeHeight + ' originalHeight: ' + originalHeight);
  var nodeCanGrowBigger =  (windowHeight - safeBuffer - 10) > nodeHeight && nodeHeight < originalHeight;
  console.log('nodeCanGrowBigger: ' + nodeCanGrowBigger);
  
  if(windowIsShowing && windowIsCutOff) {
     console.log('do work');
     shrinkWindow(nodeBottom, windowHeight, nodeHeight);
  }
  
  if(nodeCanGrowBigger){
  	growWindow(nodeBottom, windowHeight, nodeHeight);
  }
}

function growWindow(nodeBottom, windowHeight, nodeHeight){
  var node = document.getElementById('sample');
  var originalHeight = nodeHeight;
  var offset = nodeHeight - windowHeight;
  var newHeight;
  if(offset >= -safeBuffer && offset <= safeBuffer){
   newHeight = originalHeight;
  }
  else if(offset >= 0){
  	newHeight = originalHeight + offset;
    console.log('positive calculation originalHeight: ' + originalHeight + ' offset: ' + offset + ' for newHeight: ' + newHeight);
	}else{
  	newHeight = originalHeight - offset;
    console.log('negative', newHeight);
  }
  node.style.height = newHeight + 'px';
  console.log('height attmpted changed to', newHeight);
  console.log('height offset', node.offsetHeight);
  console.log('height style', node.style.height);
}

function shrinkWindow(nodeBottom, windowHeight,...