存在模态但 body 仍在滚动

Question

我正在使用 React 并试图在我的模式打开时阻止我的 body 滚动。

我看过很多关于这个的帖子，都建议添加 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

.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%);
}

Here is my codesandbox

Answer 1

要解决这个问题，您可以在 css 上添加一个 body 选择器并放置 overflow:hidden.

edited codesandbox

然后您可以根据需要有条件地添加逻辑。

存在模态但 body 仍在滚动

Modal present but body still scrolls

html

javascript

css

modal-dialog

reactjs