Okay I simply want to know what I have to add to my Vanilla JavaScript code to load more content once the bottom of the scrolled div/page (wholewrapper) is reached. The code I have included works pretty well as I'm a beginner at vanilla JavaScript. But I need help understanding how to structure onScrollEvents with HttpRequest.

Here is my code:

Vanilla JavaScript:

let page = 1;
const last_page = 10;
const pixel_offset = 200;
const throttle = (callBack, delay) => {
  let withinInterval;
  return function () {
    const args = arguments;
    const context = this;
    if (!withinInterval) {
      callBack.call(context, args);
      withinInterval = true;
      setTimeout(() => (withinInterval = false), delay);
    }
  };
};

const httpRequestWrapper = (method, URL) => {
  return new Promise((resolve, reject) => {
    const xhr_obj = new XMLHttpRequest();
    xhr_obj.responseType = "json";
    xhr_obj.open(method, URL);
    xhr_obj.onload = () => {
      const data = xhr_obj.response;
      resolve(data);
    };
    xhr_obj.onerror = () => {
      reject("failed");
    };
    xhr_obj.send();
  });
};

const getData = async (page_no = 1) => {
  const data = await httpRequestWrapper("GET", `myXML.json`);

  const { results } = data;
  populateUI(results);
};

let handleLoad;

let trottleHandler = () => {
  throttle(handleLoad.call(this), 1000);
};

document.addEventListener("DOMContentLoaded", () => {
  getData(1);
  window.addEventListener("scroll", trottleHandler);
});

handleLoad = () => {
  if (
    window.innerHeight + window.scrollY >=
    document.body.offsetHeight - pixel_offset
  ) {
    page = page + 1;
    if (page <= last_page) {
      window.removeEventListener("scroll", trottleHandler);
      getData(page).then((res) => {
        window.addEventListener("scroll", trottleHandler);
      });
    }
  }
};

const populateUI = (data) => {
  const container = document.querySelector(".whole_wrapper");
  data &&
    data.length &&
    data.map((each, index) => {
      const { photoVar } = image;
      const { textVar } = text;
      const { noteVar } = note;
      container.innerHTML += `
        <div class="each_bubble">
          <div class="imageContainer">
            <img src="${photoVar}" alt="" />
          </div>
          <div class="right_contents_container">
            <div class="text_field">${textVar}</div>
            <div class="note_field">${noteVar}</div>
          </div>
        </div>
        
        `;
    });
};