¿Cómo mantener y restaurar la posición de desplazamiento usando sessionStorage en React.js?
Obtuve la posición de desplazamiento horizontal usando "querySelector" y probé useEffect ... pero no funcionó.
¿Cómo soluciono este problema?
/
Aquí está mi código
export const TopNavigation = () => { const [selected, setSelected] = React.useState<string>(""); const scrollX = document.querySelector( ".react-horizontal-scrolling-menu--scroll-container " )?.scrollLeft; console.log(scrollX); useEffect(() => { sessionStorage.setItem("scrollX", JSON.stringify(xPosition)); }, []); useEffect(() => { if (selected === window.location.pathname) { sessionStorage.getItem("scrollX"); } }, []); const handleItemClick = (itemId: string) => ({ getItemById, scrollToItem }: scrollVisibilityApiType) => { setSelected(selected !== itemId ? itemId : ""); scrollToItem(getItemById(itemId), "smooth", "center", "nearest"); }; return ( <div id="TopNavigation"> <ScrollMenu onMouseUp={({ getItemById, scrollToItem, visibleItems, }: scrollVisibilityApiType) => () => { const { center } = getItemsPos(visibleItems); scrollToItem(getItemById(center), "smooth", "center"); }} options={{ throttle: 0 }} > {TOP_NAV_PATH_LIST.map((arr, idx) => ( <Menu title={arr.name} itemId={arr.name} path={arr.path} key={idx} onClick={handleItemClick(arr.name)} selected={arr.path === selected} /> ))} </ScrollMenu> </div>La matriz de dependencia vacía de su efecto de uso guarda la posición cuando se monta el componente. En este punto, la posición de desplazamiento será 0. Cambie el código a:
useEffect(() => { return () => { const scrollX = document.querySelector(".react-horizontal-scrolling-menu--scroll-container")?.scrollLeft; sessionStorage.setItem("scrollX", JSON.stringify(xPosition)); }; }, []);Esto guardará la posición cuando el componente se desmonte.