<div class="container" dir="ltr">
  <div id="list">
  </div>
  
  <p id="loader"  class="loader">
  Loader ...
</p>
</div>

 

.container {
    height: 100vh;

   scroll-snap-type: y mandatory;
  overflow: scroll;
}


.item {
  margin: 0;
  padding: 20px 0;
  text-align: center;
  scroll-snap-align: start;
  height: 300px;
}

.loader {
 
  height: 50px;
  display: flex;
   background: #eee;
  justify-content: center;
}


.item:nth-child(even) {
  background: #eee;
}

const count = 10;
let index = 0;

const loader = document.getElementById("loader")



function addItems() {
  const fragment = document.createDocumentFragment();

  for (let i = index + 1; i <= index + count; ++i) {
    const item = document.createElement("p");

    item.classList.add("item");
    item.textContent = `#${i}`;

    fragment.appendChild(item);
  }
  document.getElementById("list").appendChild(fragment);
  index += count;
}

const io = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (!entry.isIntersecting) {
      return;
    }
    console.log('this is working');
    addItems();
  });
});

io.observe(loader);

addItems();