使用useContext在react中切换模态后恢复滚动位置

Question

目标

在div从固定位置切换到无位置后，恢复窗口的scoll位置。

问题

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

描述

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

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上的固定位置来删除窗口上的滚动

另一方面，您正在呼叫

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

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

在调用此函数之前，您需要确保您的模态已安全关闭，并且后台div已返回到正常位置。要查看行为，您可以使用setTimeout函数，并在设置的时间内调用该函数，例如

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