Estoy usando el desplazamiento infinito para mi aplicación de reacción y tengo esta función que detecta cuándo estoy exactamente en la parte inferior de la página:
const [isFetching, setIsFetching] = useState(false); // Fire Upon Reaching the Bottom of the Page const handleScroll = () => { if ( window.innerHeight + Math.max( window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop ) !== document.documentElement.offsetHeight ) return; setIsFetching(true); }; // Debounce the Scroll Event Function and Cancel it When Called const debounceHandleScroll = debounce(handleScroll, 100); useEffect(() => { window.addEventListener("scroll", debounceHandleScroll); return () => window.removeEventListener("scroll", debounceHandleScroll); }, [debounceHandleScroll]); debounceHandleScroll.cancel();El problema radica cuando cargo mi página en mi teléfono y parece que por la pestaña o barra del navegador del móvil, no está detectando la parte inferior de la página y por lo tanto no carga el contenido.
¿Hay alguna forma en que pueda detectar que el usuario está cerca del fondo y activar esa función solo entonces?
Logré cambiar la función de desplazamiento a esto y ahora está funcionando.
const handleScroll = () => { if ( window.innerHeight + Math.max( window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop ) > document.documentElement.offsetHeight - 100 ) { setIsFetching(true); } else { return; } }; El número que se reduce de document.documentElement.offsetHeight determina la cantidad restante desde la parte inferior de la página. 100 me parece suficiente ya que lo probé en mi teléfono y funciona.
Creo que un IntersectionObserver podría ser lo que estás buscando. Puede consultar este tutorial para obtener información básica: https://dev.to/producthackers/intersection-observer-using-react-49ko
También puede convertir esto en un enlace personalizado que toma una referencia (en su caso, un elemento en la parte inferior de su página):
import { useEffect, useState } from 'react'; const useIsVisible = ref => { const [isIntersecting, setIntersecting] = useState(false); const observer = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting), ); useEffect(() => { observer.observe(ref.current); return () => { observer.disconnect(); }; }, []); return isIntersecting; }; export default useIsVisible;Tal vez también el siguiente paquete pueda ayudarlo, hace que la implementación del desplazamiento infinito sea bastante fácil:
https://www.npmjs.com/package/react-infinite-scroll-component