Tengo un documento que contiene ciertos elementos con ids únicos. Esta página contiene lo que podrían ser cientos de divs diferentes, cada uno con su identificación única. Por ejemplo, considere lo siguiente:
<div id='root'> <div id='my-1-id'>1</div> <div id='my-2-id'>2</div> <div id='my-3-id'>3</div> <div id='my-4-id'>4</div> <div id='my-5-id'>5</div> // Even more divs <div id='my-1000-id'>1000</div> </div> Dentro de mi componente React , implementé una función LazyRendering para que el document se cargue a medida que el usuario se desplaza hacia abajo en la página (que es un comportamiento bastante personalizado).
Sin embargo, en este momento, estoy buscando implementar una función que examine ciertas partes de la página usando document.getElementById . Pero encontrar todo en la página no funciona porque el documento completo no se procesa de una sola vez. Entonces, si el usuario está en la parte superior de la página y usa esta funcionalidad para buscar algo en la parte inferior de la página (es decir, la parte que no ha sido 'representada de forma diferida'), entonces document.getElementById devolverá un valor nulo.
Como resultado de todo esto, estoy buscando implementar una función que simplemente recorrerá el documento para buscar este elemento. Como ejemplo:
const lookForElement = (id) => { let element = document.getElementById(id) while (!element) { window.ScrollTo(0, 200) //NOT scrolling element = document.getElementById(id) } return element } Como puede ver, si no se encuentra el elemento, continúe desplazándose 200 píxeles de altura hasta encontrar el elemento. Sin embargo window.ScrollTo(0, 200) no funciona y la página siempre se fija en la altura original de la página. ¿Qué estoy haciendo mal?
let testCounter = 0, id2look4 = "" const lookForElement = (id) => { if (testCounter++ > 3) { // mocking the existance of the div we look for document.getElementById("root").innerHTML += `<div id="${id2look4}">ID to look for</div>` } let element = document.getElementById(id2look4) if (element) { alert("found") element.scrollIntoView() return } window.scrollBy(0,200) setTimeout(lookForElement,100) } id2look4 = "my-1000-id"; lookForElement() div { height: 500px; border: 1px solid black; } <div id='root'> <div id='my-1-id'>1</div> <div id='my-2-id'>2</div> <div id='my-3-id'>3</div> <div id='my-4-id'>4</div> <div id='my-5-id'>5</div> // Even more divs <div id='my-1500-id'>5</div> </div>Eliminar esto cuando se prueba
if (testCounter++ > 3) { document.getElementById("root").innerHTML += `<div id="${id2look4}">ID to look for</div>` }