1

目标

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

问题

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

描述

我有一个通过 onClick 打开模式的页面。因此，我创建了一个“ToggleModalContext”，一方面将道具传递给模态，另一方面传递给背景 div。我想通过设置 css 属性来修改背景 divposition以fixed避免滚动背景而不是模式的内容。当模式关闭时，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？但是怎么做？提前感谢您的时间:)

4

1 回答 1

1

根据您提供的描述，您在打开模式时使用背景 div 上的固定位置来删除窗口上的滚动

另一方面，你在打电话

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

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

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

setTimeout(() => window.scrollTo(0, scrollPosition), 2000);
于 2020-03-01T19:43:32.333 回答