JSFiddle - React, Tailwind, and code Playground

by nilloc

HTML

<div id="options"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus eius omnis et magni, ullam consectetur autem laudantium saepe veniam ipsum libero, aut magnam repellat. Alias animi odit mollitia placeat, eligendi.</div></div>

CSS

#options{
  --height:100vh;
  position:absolute;
  background:teal;
  max-height:var(--height);
  width:100px;
  overflow:auto;
}



#options::before{
  content:"up";
  position:-webkit-sticky;
  z-index:1;
  background:gray;
  top:0px;
  width:100%;
}

#options::after{
  content:"down";
  position:-webkit-sticky;
  z-index:1;
  background:gray;
  bottom:calc(100% - var(--height)); /* still gotta calculate the inner height of the container*/
  width:100%;
  left:0;
}

JavaScript

let options = document.querySelector('#options');
console.log(options);

options.addEventListener('click', handleOptionsClick);

function handleOptionsClick(evt){
	if(options.clientHeight > 100){
		options.style.setProperty('--height', '100px');
  }else{
  	options.style.setProperty('--height', '100vh');
  }
}