切换模态后恢复滚动位置以与 useContext 反应

Question

目标

在 div 从固定位置切换到 none 后恢复 window 的滚动位置。

问题

恢复滚动位置不起作用，尽管我已将其正确保存到状态。

描述

我有一个页面，其中的模态是通过 onClick 打开的。因此，我创建了一个 "ToggleModalContext" 一方面将道具传递给模态，另一方面将道具传递给背景 div。我想通过将 css 属性 position 设置为 fixed 来修改背景 div，以避免滚动背景而不是模式的内容。当模式关闭时，position: fixed 被删除，我想恢复 window 的滚动位置。这最后一步不起作用。也许其他人有想法？

ToggleModalContext（就是调用滚动恢复函数的上下文）

import React from "react";

export const ToggleModalContext = React.createContext();

export const ModalProvider = props => {
  const [toggle, setToggle] = React.useState(false);
  const [scrollPosition, setScrollPosition] = React.useState();

  function handleToggle() {
    if (toggle === false) {
      setScrollPosition(window.pageYOffset); // When the Modal gets opened, the scrollposition is saved correctly
    }
    if (toggle === true) {
      window.scrollTo(0, scrollPosition); // Restoring doesnt work. 
    }

    setToggle(!toggle);
  }

  return (
    <ToggleModalContext.Provider value={[toggle, handleToggle]}>
      {props.children}
    </ToggleModalContext.Provider>
  );
};

也许有人有想法？也许我必须使用 useEffect？但是怎么办？感谢您提前抽出时间:)

Answer 1

根据您提供的描述，当您打开模态

时，您正在使用背景上的固定位置 div 来移除 window 上的滚动

另一方面，您正在呼叫

if (toggle === true) { window.scrollTo(0, scrollPosition);}

在您的模式关闭之前。此时背景div处于固定位置，没有滚动到哪里

在调用此函数之前，您需要确保您的模态窗口已安全关闭并且您的背景div已恢复到正常位置。要查看行为，您可以使用 setTimeout 函数并在设定的时间调用此函数，例如

setTimeout(() => window.scrollTo(0, scrollPosition), 2000);

切换模态后恢复滚动位置以与 useContext 反应

Restore scroll position after toggled a modal in react with useContext

scroll-position

reactjs