问题

我已经寻找了一段时间解决我的问题的方法，可以找到许多与类似问题相关的文章，但没有完全解决我的问题。

我有一个用React编写的应用程序。在移动网站的版本上，用户可以点击汉堡菜单以打开导航菜单。导航菜单占据了80vw和100vh。由于某种原因，用户仍然可以通过滑动导航菜单来滚动应用程序的背景。

我的移动导航样式如下。

.mobileNav {
  height: 100vh;
  width: 0vw;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #1d1d1d;
  z-index: 999;
  will-change: transform;

  -webkit-transition: 0.75s;
  -moz-transition: 0.75s;
  -ms-transition: 0.75s;
  -o-transition: 0.75s;
  transition: width 0.75s;

  &--open {
    width: 80vw;
  }
}

我尝试过在打开导航栏时将position: fixed或overflow: hidden设置为父元素。这可以防止滚动，但也会将用户跳到页面顶部，这是不希望的。

这是我的jsfiddle链接https://codesandbox.io/s/react-fiddle-forked-p9fqc8?file=/src/App.js&resolutionWidth=492&resolutionHeight=675。

.mobileNav {
  height: 100vh;
  width: 0vw;
  position: fixed;
  top: 0;
  right: 0;
  background-color: #1d1d1d;
  z-index: 999;
  will-change: transform;

  -webkit-transition: 0.75s;
  -moz-transition: 0.75s;
  -ms-transition: 0.75s;
  -o-transition: 0.75s;
  transition: width 0.75s;

  &--open {
    width: 80vw;
  }
}

答案1

得分: 0

这实际上是默认行为。您需要做的是编写一些代码，使在模态框打开时背景不可滚动。以下是可能有所帮助的快速阅读链接：
https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/

答案2

得分: 0

const App = () => {
  const [isNavOpen, setIsNavOpen] = useState(false);

  useEffect(() => {
    document.body.style.overflow = isNavOpen ? "hidden" : "auto";
  }, [isNavOpen]);

  return (
    <div className="App">
      <NavMenu isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
      <div className={styles.red}>
        Hello <button onClick={() => setIsNavOpen(true)}>Open</button>
      </div>
      <div className={styles.blue}>Hello</div>
      <div className={styles.green}>Hello</div>
    </div>
  );
};

export default App;

useEffect will fire every time the nav modal swaps between being open / closed. when it's set to closed, we enable body scrolling. when it's open, we disable body scrolling.

<details>
<summary>英文:</summary>

const App = () => {
const [isNavOpen, setIsNavOpen] = useState(false);

useEffect(() => {
document.body.style.overflow = isNavOpen ? "hidden" : "auto";
}, [isNavOpen]);

return (
<div className="App">
<NavMenu isNavOpen={isNavOpen} setIsNavOpen={setIsNavOpen} />
<div className={styles.red}>
Hello <button onClick={() => setIsNavOpen(true)}>Open</button>
</div>
<div className={styles.blue}>Hello</div>
<div className={styles.green}>Hello</div>
</div>
);
};

export default App;

useEffect will fire every time the nav modal swaps between being open / closed. when it's set to closed, we enable body scrolling. when it's open, we disable body scrolling.

</details>