Quiero obtener la y position actual en el document para cambiar la interfaz de usuario en ciertos momentos. El código que uso atm no funciona y no entiendo por qué.
const [verticalPosition, setVerticalPosition] = useState() useEffect(() => { setVerticalPosition(window.scrollY) }, [window.scrollY]) useEffect(() => { console.log(verticalPosition) }, [verticalPosition])Busqué alternativas y encontré las bibliotecas más complejas para hacer algo así de fácil. Así que me gustaría que funcione de esta manera. ¿Alguien podría decirme cómo podría funcionar esto?
Gracias por adelantado
Debe agregar un detector de eventos al evento document.scroll de la siguiente manera:
const [verticalPosition, setVerticalPosition] = useState() useEffect(() => { const onScroll = ()=>{ setVerticalPosition(window.scrollY); } document.addEventListener('scroll', onScroll); return ()=>document.removeEventListener('scroll', onScroll); // cleanup function runs when component is unmounted }, []); // empty dependency array so it only runs on mountSi necesita este comportamiento en varios componentes, es trivial abstraerlo en un enlace personalizado:
// hooks/useScrollY.js const useScrollY = ()=>{ const [verticalPosition, setVerticalPosition] = useState() useEffect(() => { const onScroll = ()=>{ setVerticalPosition(window.scrollY); } document.addEventListener('scroll', onScroll); return ()=>document.removeEventListener('scroll', onScroll); }, []); return verticalPosition; } export default useScrollY; // how to use: import useScrollY from "../hooks/useScrollY" const MyComponent = ()=>{ const scrollY = useScrollY(); // do something with scrollY return ( //... ); }