JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<button>Add</button>
<div class="scroll">
  
</div>

CSS

.scroll{
  display: flex;
  flex-direction: column-reverse;
  height: 300px;
  width: 150px;
  margin: 20px auto;
  border: solid 1px silver;
  overflow-y: scroll;
}

.scroll div{
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: solid 1px silver;
  margin: 5px 10px;
}

JavaScript

const scrl = document.querySelector('.scroll');
const btn = document.querySelector('button');
let i = 0;
btn.onclick = () => {
	const c = document.createElement('div');
  i++;
  c.innerText = i;
  
  if(scrl.childNodes.length){
  	scrl.insertBefore(c, scrl.childNodes[0]);
  } else {
	  scrl.appendChild(c);
  }
  
};