JSFiddle - React, Tailwind, and code Playground

by aliaksej

HTML

<button id=button>Add padding</button>

<div class="list-parent">
  <div class="list" id="list">
    Long content here fjkadslf ;dfaklsdkl;fadklsf dakl;fd kl;ajdafl;kd fdkl;asf kl;dfkl;af dkl;afdkls;f daklsfjsdkl;f dakl;jsklf dafkls; f;klajsdfkl ;akls;fadkls;f dkl;fakls;dklf akls;fdkl ;aksf dkl;afskl;fdkl jasl;kf dfakl;sf l;dkas fkl;d al;ksfdkl;fadkls;f ;adskl;dfkldj askl;jfdkl;j askl;fdkl;j asfkl;j asd kl;jdfj adskl;jf dkl;jasfkl ;dafkl;sjd fkl;djfakls;fdkl;fadklsfklj;fdfa; f;askl;sj;d;fjkl;adsfjl;as l;dfj akls;fj;d fkl;jaksadjsfkl; fdfaklfda;sdlf kdfa;dklsf dksafjkl;d
  </div>
</div>

CSS

.list-parent {
  height: 150px;
  width: 200px;
  border: 1px solid red;
  box-sizing: border-box;
}

.list {
  overflow: auto;
  height: 100%;
  
  border: 1px solid green;
}

JavaScript

list.addEventListener('scroll', function() {
	console.log('scroll');
})

button.onclick = function() {
	list.parentNode.style.paddingBottom = '50px';
};