JSFiddle - React, Tailwind, and code Playground

by kpulkit29

HTML

<div class="container">
    <div class="list">
    
    </div>
</div>

CSS

.container {
  border: 1px solid black;
  width:500px;
  height:200px;
  overflow: auto;
}

.list {
  height: auto;
  width: 500px;
}

.child {
  height: 50px;
  width: 100%;
  border: 1px solid blue;
}

.divider {
  border: 1px solid red;
}

JavaScript

let added = false;

function addElement() {
  let container = document.querySelector('.container');
  let list = document.querySelector('.container .list');

  function appendElements() {
    for (let i = 0; i < 6; i++) {
      let div = document.createElement('div');
      list.appendChild(div);
      div.classList.add('child');
    }
  }
  appendElements();
  if (!added) {
    let div = document.createElement('div');
    container.appendChild(div);
    div.classList.add('divider');
    const options = {
      root: container,
      threshold: 1
    };

    const observer = new IntersectionObserver(appendElements, options);

    /* observer.observe(div) */;
  }
}
addElement();