Javascript 模态存在，但主体仍滚动

我在React中工作，试图在模态打开时阻止我的身体滚动

我已经看过多篇关于这个的帖子，都建议添加

overflow:hidden

作为解决方案，但是我似乎无法让它起作用

仅供参考-我的示例是一个简单的表示，其中一个模态必须是开放的，暂时没有动态变量。我只是想找出这个测试用例，这样我就可以集成到我的代码中

组成部分

export default function App() {
  return (
    <div className="App modal-open">
      <h1>Hello CodeSandbox</h1>
      <br />
      ... <!-- Added multiple <br/>s to force scrollable body -->
      <h2>Start editing to see some magic happen!</h2>

      <div className="modal-container">
        <div className="modal-content">My modal</div>
      </div>
    </div>
  );
}

---

要解决这个问题，您可以在css上添加一个

主体

选择器，并将

溢出：隐藏

---

然后你可以有条件地添加一个你想要的逻辑。

在身体的css周围添加条件逻辑的位置/方式？这篇文章可以帮你很棒，谢谢！这是我以前做过的事情，但是星期五综合症已经折磨了我的大脑。这个链接对用例也很有帮助

.modal-open {
  background: red;
  overflow: hidden;
  overflow-y: hidden;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.modal-content {
  position: fixed;
  background: white;
  width: 80%;
  height: auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}