时间戳

首页 > 解决方案 > 打开子页面（弹出页面）时如何禁用滚动父组件？- CSS

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

问题描述

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

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

这是我的代码

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

标签： reactjscss

解决方案

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

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

推荐阅读