Tengo una lista desplegable en mi aplicación React: cuando me desplazo por la parte inferior, obtengo los siguientes elementos del backend, por lo que mi lista desplegable es dinámica. Quiero saber si estoy al final de la lista, luego quiero buscar los siguientes elementos. ¿Cómo verificar si es hora de buscar los siguientes elementos?
<Content> <MySelectField onClick={handleOnClick} onScroll={handleOnScroll}> function handleOnScroll(e) { const { scrollTop, scrollHeight, offsetHeight } = e.target; if (offsetHeight - scrollTop < 50) { handleLoadNextElements(); } }¿Qué condiciones debo usar para obtener los siguientes elementos cuando estoy en la parte inferior de mi lista desplazable?
Esto debería funcionar para un desplazamiento vertical. Solución basada en la detección cuando el usuario se desplaza hasta la parte inferior de div con React js
function handleOnScroll(e) { const bottom = e.target.scrollHeight - e.target.clientHeight <= e.target.scrollTop + 50; if (bottom) { handleLoadNextElements(); } }Si desea una compatibilidad total con dispositivos móviles, puede echar un vistazo a esta biblioteca, funciona perfectamente en dispositivos móviles. Reaccionar-bottom-scroll-oyente
Resolví mi problema agregando onScroll a mi div:
<TemplateSelectField onClick={handleOnClick} onScroll={handleOnScroll} >y entonces:
function handleOnScroll(e) { const { scrollTop, scrollHeight, offsetHeight } = e.target; const hasScrollReachedBottom = offsetHeight + scrollTop > scrollHeight - 40; if (hasScrollReachedBottom) { handleLoad(); } }Funciona excelente :)