Как отключить прокрутку родительского компонента при открытии дочерней страницы (всплывающей страницы)? - CSS

Question

Я работаю над демонстрационным проектом React. У меня есть родительская страница и дочерняя страница.

Мне нужно отключить прокрутку на родительской странице при открытии дочерней страницы. Это моя демка Fiddle

Это мой код

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

Answer 1

вы уже добавляете класс к родителю, когда открывается ребенок. Вы можете предотвратить прокрутку с помощью 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

Тем не менее, может быть и менее манипулятивный вариант просмотра для достижения этой цели.

Answer 2

Когда откроется всплывающее окно, добавьте класс к родителю, который отключит прокрутку с помощью CSS с помощью overflow: hidden

При закрытии всплывающего окна удалите этот класс. Вы можете сохранить переменную в состоянии родителя, которая будет отслеживать, открыто ли всплывающее окно, и добавлять / удалять класс в зависимости от этой переменной.