De acuerdo, simplemente quiero saber qué debo agregar a mi código JavaScript Vanilla para cargar más contenido una vez que se alcanza la parte inferior de la página/div desplazada (envoltura completa). El código que he incluido funciona bastante bien ya que soy un principiante en JavaScript estándar. Pero necesito ayuda para comprender cómo estructurar onScrollEvents con HttpRequest.

Aquí está mi código:

JavaScript vainilla:

 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> `; }); };