Don't scroll parent component when Modal is opened

[rahulthewall]

Summary: Don't scroll parent component when Modal is opened

Steps to reproduce:

1. Implement a Modal
2. Open the Modal
3. The parent component of the Modal is still scrollable while the Modal is open

Expected behavior: The Component that calls the Modal should not be scrollable when the Modal is opened.

Is there any way I can change this?

[diasbruno]

@rahulthewall there is an callback called onAfterOpen. you can install a callback to disable the desired element.

[emmerich]

@rahulthewall Or in CSS, something like:

.ReactModal__Body--open {
  overflow-y: hidden;
}

Which will prevent overflow-y on the body whilst the modal is open.

[amangeot]

Hello @diasbruno @emmerich ,are your solutions work arounds or best / common practices ?

Is the CSS going to work in all browsers ? I don't really know this syntax, but it's working with sass ?

[diasbruno]

@amangeot sometimes you need to change the behaviour of your application because of an event X. so it's an ok solution.

@emmerich's css class, .ReactModal__Body--open, is defined by the react-modal, but it has no effect because this rule is not defined by react-modal. It's not defined because if you want the oppose behaviour you would need to be more hacky overriding the .ReactModal__Body--open rule to let the page scroll.

you can use afterOpen which is the programmatically way and you can attach a css class to any element.

[diasbruno]

...if it's a cross-browser solution, you always need to test. A good place to check which browsers implements this feature is Mozilla's MDN CSS
MDN overflow-y

[emmerich]

@amangeot overflow-y works with all browsers and I assume React Modal works with the same browser set as React.

@diasbruno I didn't understand this: .ReactModal__Body--open, is defined by the react-modal, but it has no effect because this rule is not defined by react-modal.. Could you clarify? Not sure what the problem is with using a class defined by React Modal for React Modal-specific behaviour.

[diasbruno]

gee, that was a very bad explanation...sorry.

.ReactModal__Body--open class is added to the body element by react-modal, but the class itself is not defined.

[carlows]

Is there another workaround for this? I would like the parent component not to be scrollable while preserving the page scroll

[carlows]

nevermind, just need to set position: absolute for the element instead of position: fixed

[diasbruno]

I'm closing this issue for clean up. Thank you all for the tricks, hope we can publish this on the docs.

[AlecRust]

For this to work on iOS position, width and height are also necessary:

.ReactModal__Body--open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
}

However this will cause the page to jump to the top on modal open.

[kaiomagalhaes]

I'm facing exactly this same issue but only for IOS. The overflow hidden on the body works just fine for the others platforms though. Does anyone found a good solution that doesn't have backfires like the position going to the top after the modal being opened?

[AlecRust]

@kaiomagalhaes only to use react-aria-modal instead.

[wiggitamoo]

I am also looking for a solution to the position of the parent page scrolling to the top when the modal is opened.