CODEWITHSUNDEEP
reactjscss
tommy123
tommy123

Reputation: 587

How to disable scroll parent component when child page (popup page) is opened? - CSS

I am working on a React Demo Project. I have a parent page and a child page.

I need to disable scroll on the parent page when the child page is opened. This is my Demo Fiddle

This is my Code

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

Upvotes: 1

Views: 3038

Answers (2)

Tschitsch
Tschitsch

Reputation: 1338

you're already adding a class to the parent when a child is opened. you can prevent scrolling using css, e.g.

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

this should do the trick, see here: https://codesandbox.io/s/mjz1jk79q8

However, there might be a less view manipulative variant in order to achieve this too.

Upvotes: 0

Bojan Ivanac
Bojan Ivanac

Reputation: 1180

When the popup is opened, add a class to the parent that will disable the scrolling via CSS with overflow: hidden

When closing the popup, remove that class. You can store a variable in the state of the parent that will track if the popup is opened or not, and add / remove the class depending on that variable.

Upvotes: 4

Related Questions