如何在 react.js 中使用 sessionStorage 维护和恢复滚动位置？答案

【问题标题】：How to maintain and restore the scroll position using sessionStorage in react.js?如何在 react.js 中使用 sessionStorage 维护和恢复滚动位置？
【发布时间】：2022-06-30 15:33:51
【问题描述】：

如何在 React.js 中使用 sessionStorage 维护和恢复滚动位置？

我使用“querySelector”获得水平滚动位置

我尝试使用 useEffect.. 不工作

我该如何解决这个问题？

useEffect(() => {
  sessionStorage.setItem("scrollX", JSON.stringify(xPosition));
}, []);

useEffect(() => {
  if (selected === window.location.pathname) {
    sessionStorage.getItem("scrollX");
  }
}, []);

-这是我的代码

export const TopNavigation = () => {
  const [selected, setSelected] = React.useState<string>("");

  const scrollX = document.querySelector(
    ".react-horizontal-scrolling-menu--scroll-container "
  )?.scrollLeft;
  console.log(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>

【问题讨论】：

标签： javascript reactjs typescript

【解决方案1】：

你使用效果的空依赖数组保存组件挂载时的位置。此时，滚动位置将为0。将代码更改为：

useEffect(() => {
  return () => sessionStorage.setItem("scrollX", JSON.stringify(xPosition));
}, []);

这将在组件卸载时保存位置。

【讨论】：