<div class="container p-3 mx-auto mb-3">
  <h5 class="text-center pb-4">scroll down ↓</h5>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, itaque inventore at reprehenderit doloremque enim rerum corporis odio. At odit incidunt perspiciatis aliquid? Aliquam inventore sequi perferendis reprehenderit recusandae velit.
  Perspiciatis ratione nihil, voluptas vitae delectus quod fugit non tenetur maiores iste veniam. Numquam ad sunt unde autem quasi necessitatibus veniam voluptates a? Perspiciatis, quae possimus amet debitis error sunt.
  Totam est eum molestias! Atque reiciendis quod pariatur animi assumenda sapiente qui ex in architecto eligendi tempore perferendis at beatae debitis sunt minus, tenetur excepturi possimus aliquid nostrum nam distinctio!
  Magni officia excepturi ullam nesciunt eius illum, voluptates ex nihil fugiat ut corrupti nam molestiae itaque aperiam sed, vitae laborum atque. Inventore natus, cupiditate sapiente beatae tempore vero officia debitis.
  Vel quam sapiente dolorum labore laudantium corrupti, consequuntur iusto minima expedita mollitia magni minus doloribus, dolor nulla facilis commodi earum alias hic est excepturi et distinctio eum. Placeat, perferendis nulla?
  Officia modi quisquam similique provident eveniet atque placeat vitae ab delectus repellendus impedit repellat laborum dolore eum perspiciatis qui doloremque perferendis aliquid, nemo consequatur, pariatur quo. Unde veritatis porro soluta.
  Sapiente quo molestias iste consequatur eaque fuga voluptas corrupti sit deleniti at ipsum dolorem ipsa eos possimus sequi, quaerat impedit tenetur officia! Odit doloremque alias expedita corporis quo reiciendis accusamus?
  Iste id nam a esse blanditiis quam explicabo, repellendus consectetur quasi laborum optio culpa possimus quibusdam debitis numquam reiciendis, necessitatibus exercitationem totam atque minima dolores deserunt. Labore rerum id eveniet.
  Dolore, facere unde ipsam animi id tempore. Aperiam perferendis quia in adipisci, molestias, neque magni, facere perspiciatis corrupti quae possimus odit iure. Recusandae aut qui ex quidem quibusdam id quaerat!
  Accusantium veritatis, delectus reprehenderit eveniet rerum repudiandae esse tempora commodi. Doloribus ab sunt consequuntur veniam ipsum tempore deserunt. Architecto itaque minus illo voluptates aut facilis perspiciatis quaerat non unde pariatur.</p>
  <ul id="content" class="list-unstyled"></ul>
</div>
.container {
  max-width: 500px;
}
.box {
  padding-bottom: 100%;
}
View Compiled 
const content = document.getElementById('content');

window.addEventListener('scroll', throttle(handleScroll));

function throttle(func, timeout = 1000) {
  let isClose = false;
  let timer = null;
  return function(...args) {
    if (isClose) {
      return;
    }
    isClose = true;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
      // func.call(this, ...args);
      // func.bind(this)(...args);
      isClose = false;
    }, timeout);
  }
}

function handleScroll() {
  console.log('handleScroll');
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    content.innerHTML += `<li class="row">
      <div class="col-sm-4 mb-3"><div class="box bg-warning"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-warning"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-warning"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-info"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-info"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-info"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-success"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-success"></div></div>
      <div class="col-sm-4 mb-3"><div class="box bg-success"></div></div>
    </li>`;
  }
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.