Question

我正在做一个React Demo项目。我有一个父页面和一个子页面。

打开子页面时，我需要在父页面上禁用滚动。这是我的演示Fiddle

这是我的代码

        <div className="overlay">
        <div className="overlay-opacity" onClick={this.hideChild} />
        <Child data={data} applyFilter={this.applyFilter} />
      </div>

Answer 1

打开弹出窗口后，向父级添加一个类，该类将禁止使用overflow: hidden通过CSS滚动

关闭弹出窗口时，删除该类。您可以在父级状态下存储一个变量，该变量将跟踪弹出窗口是否打开，并根据该变量添加/删除类。

Answer 2

打开子级时，您已经在向父级添加了一个类。您可以防止使用CSS进行滚动，例如

.parent-overlay {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

这应该可以解决问题，请参见此处：https://codesandbox.io/s/mjz1jk79q8

但是，为了达到此目的，可能会有较少的视图操纵变量。

打开子页面（弹出页面）时如何禁用滚动父组件？ -CSS

2 个答案: