Estoy creando un componente React simple para recordar dónde se encuentra en la página y ubicarlo allí cuando regrese.
Aquí está el código:
function ScrollCache() { window.scroll(0, parseInt(localStorage['scroll'])); document.addEventListener('scroll', function (e) { if (window.scrollY != 0) { localStorage['scroll'] = window.scrollY.toString(); } }) return (<></>) } Básicamente, almacena en caché la última posición de desplazamiento conocida y usa window.scroll(x, y) para desplazarse a esa posición. Verifiqué que localStorage funciona según lo previsto con un archivo console.log inmediatamente antes de window.scroll . También probé un 100 estático para la coordenada y. Pase lo que pase, solo se desplaza una vez al recargar y nunca más cuando estoy navegando.
Estoy usando React Router para ir entre páginas web. Cualquier ayuda es apreciada
No necesita agregar el detector de eventos de desplazamiento cada vez que desee almacenar en caché el desplazamiento.
En su lugar, intente esto:
const [scrollPosition, setScrollPosition] = useState(0); useEffect(() => { window.addEventListener("scroll", handleScroll, { passive: true }); return () => { window.removeEventListener("scroll", handleScroll); }; }, [scrollPosition]); useEffect(() => { localStorage['scroll'] = scrollPosition.toString(); }, [scrollPosition); const handleScroll = () => { const position = window.pageYOffset; setScrollPosition(position); };