Don't scroll parent component when Modal is opened
rahulthewall opened this issue ยท 51 comments
Summary: Don't scroll parent component when Modal is opened
Steps to reproduce:
- Implement a Modal
- Open the Modal
- 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?
@rahulthewall there is an callback called onAfterOpen
. you can install a callback to disable the desired element.
@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.
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 ?
@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.
...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
@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.
gee, that was a very bad explanation...sorry.
.ReactModal__Body--open
class is added to the body element byreact-modal
, but the class itself is not defined.
Is there another workaround for this? I would like the parent component not to be scrollable while preserving the page scroll
nevermind, just need to set position: absolute
for the element instead of position: fixed
I'm closing this issue for clean up. Thank you all for the tricks, hope we can publish this on the docs.
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.
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?
@kaiomagalhaes only to use react-aria-modal instead.
I am also looking for a solution to the position of the parent page scrolling to the top when the modal is opened.
@wiggitamoo I've gone with @AlecRust solution, the other react modal does't have this issue.
Thanks @AlecRust, I'll use this modal as well.
hey tried
parent { overflow: hidden; position: fixed; width: 100%; height: 100%; }
Unfortunately it also stops the parent from scrolling completely. @diasbruno This is ios only issue. onAfterOpen will still scroll the background if i do it like this:
<Modal isOpen={open} onRequestClose={this.handleCloseModal} style={styles.modal} contentLabel="Example Modal" onAfterOpen={this.disableScroll} >
and then my disableScroll is defined like this
disableScroll = () => { document.body.style.overflow = 'hidden' }
@ wiggitamoo
I am also looking for a solution to the position of the parent page scrolling to the top when the modal is opened.
This thread is quite old, but in case it's helpful to others, I found that the way to prevent this issue is to set top, right, bottom, and left to zero:
overflow: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
@mbrowne does it solve for when you need to scroll the content of the modal?
As long as the container holding your modal content has overflow: auto
or overflow-y: auto
then yes.
Hello. Does anyone know the solution to this issue? I tried all proposed ones and have again the scroll of the background enabled.
@triathlet23 I've gone with @AlecRust solution, the other react modal doesn't have this issue.
Thanks for a suggestion, but we've built a complete app with the react modal. If smb is interested, I used the solution that was partly proposed in the thread :
OnAfterClose={() => document.body.style.overflow = 'hidden' }
OnRequestClose={() => document.body.removeAttribute('style') }
It woks fine for me and hasn't any side effects.
I'll reopen this issue, so it's visible for people looking for help.
@kaiomagalhaes only to use react-aria-modal instead.
react-aria-modal
from davidtheclark uses https://github.com/davidtheclark/no-scroll. So you can also implement that into your modal to fix the scroll issue. It basically disables the document scroll behavoir.
no-scroll
helped us to solve this issue. :)
We did something like this:
useEffect(() => {
if (open) {
noScroll.on()
}
return () => noScroll.off()
})
shouldFocusAfterRender={false}
works fine for me.
shouldFocusAfterRender={false}works fine for me.
Does it? This did not prevent the page behind the modal from scrolling for me... As far as I can tell it did not change anything. Searching through the react-modal docs for "shouldFocusAfterRender" returned zero results. Where did you find this prop name?
no-scroll explicitly says that it does not work for iOS in their readme
and references to use the solution at body-scroll-lock, which explains the cons to many of the approaches suggested above in their readme
After trying many of the above suggested solutions, and getting the errors that are stated in the body-scroll-lock readme. I have decided to go with the aforementioned package that solves this clearly-not-one-simple-solution-fits-all problem.
no-scroll explicitly says that it does not work for iOS in their readme
I've read this too and no-scroll
is working for us on iOS.
@diasbruno Is there a reason as to why this behavior is not supported internally by react-modal? It seems to me that in most cases you would want to disable scroll when you open a modal, perhaps there should at least be a prop to enable/disable this behaviour.
Thanks for a suggestion, but we've built a complete app with the react modal. If smb is interested, I used the solution that was partly proposed in the thread :
OnAfterClose={() => document.body.style.overflow = 'hidden' }
OnRequestClose={() => document.body.removeAttribute('style') }
It woks fine for me and hasn't any side effects.
This worked for me except I think there's a typo: it should be onAfterOpen
, not onAfterClose
. Does this solution work for you on mobile too?
@YassienW Sorry for the delay on this. Yeah, totally agree. Unfortunately, I don't have much time to work on this. So, if anyone has interest, and time, to help this, it would be great.
Using https://www.npmjs.com/package/no-scroll was the only solution that worked for me... All others had the side effect of "bumping the scroll position to the top of the page" when the modal was rendered
This example of how you can lock body scroll for mobile and desktop
Tested on Safari (iphone 5s, iphone X) and three android devices
scroll lock react-modal
Change the overflow to hidden might change the width of the page when the scroll bar is hidden, this causes visual disruption in user visual.
There are several alternatives to using overflow:hidden
if you find that visual disruption is happening...
https://stackoverflow.com/a/38539493/560114
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?
If like me, you spent hours trying to find a scroll solution for Safari 10, I found it and made a simple React hooks version here: https://codesandbox.io/s/react-modal-scrollable-safari-10-friendly-3xzzy
Thanks for a suggestion, but we've built a complete app with the react modal. If smb is interested, I used the solution that was partly proposed in the thread :
OnAfterClose={() => document.body.style.overflow = 'hidden' }
OnRequestClose={() => document.body.removeAttribute('style') }
It woks fine for me and hasn't any side effects.
I used a similar solution:
onAfterOpen={() => { document.body.style.overflow = 'hidden'; }} onAfterClose={() => { document.body.removeAttribute('style'); }}
I left onRequestClose specifically to close the modal or any other action that the page needs.
In case it helps anyone, using body-scroll-lock could look something like this:
import React, { useEffect } from "react";
import ReactModal from "react-modal";
import {
disableBodyScroll,
enableBodyScroll,
clearAllBodyScrollLocks,
} from "body-scroll-lock";
export const Modal = ({
isOpen,
children,
onRequestClose,
...props
}) => {
ReactModal.setAppElement("#my-app-element");
let contentEl = null;
useEffect(() => {
return clearAllBodyScrollLocks;
});
return (
<ReactModal
isOpen={isOpen}
onAfterOpen={() => disableBodyScroll(contentEl)}
onRequestClose={() => {
enableBodyScroll(contentEl);
onRequestClose();
}}
contentRef={(element) => (contentEl = element)}
{...props}
>
{children}
</ReactModal>
);
};
Depending on your use case, you could use overlayRef
instead of contentRef
and update the rest accordingly.
The onRequestClose
prop passed into this wrapper component can just be a function passed from the parent that updates the parent's state. Pseudo-code:
const ModalParent = () => {
const [modalOpen, setModalOpen] = useState(false);
return (
<div>
<button onClick={() => setModalOpen(true)}>open modal</button>
<Modal isOpen={modalOpen} onRequestClose={() => setModalOpen(false)}>
Modal content
</Modal>
</div>
);
};
To the authors of React Modal: I'd assumed that locking the body scroll was a built-in feature and that was one of the main reasons for using this lib. Is this just a regression or was that never actually included in functionality? Pretty much a must-have in all situations. Thanks!
I just read the docs and put code htmlOpenClassName
as attribute
Hopefully it would works for you guys โจ๐
result:
<Modal
// other attributes
htmlOpenClassName="overflow-hidden"
>
// your html
</Modal>
Btw, I used Tailwind for that and you can change the class
value based on your CSS Frameworks
Hi, I've also solved this issue by using this hooks : https://gist.github.com/reecelucas/2f510e6b8504008deaaa52732202d2da
import Modal from 'react-modal';
....
const [blockScroll, allowScroll] = useScrollBlock();
const ModalParent = () => {
const [modalOpen, setModalOpen] = useState(false);
....
return (
<div>
<button onClick={() => {setModalOpen(true); blockScroll(); }>open modal</button>
<Modal isOpen={modalOpen} onRequestClose={() => {setModalOpen(false); allowScroll();}}>
Modal content
</Modal>
</div>
);
};
So if you are using react and have an open state hook this appears to work. I'm still testing though.
useEffect(() => {
if (open) document.body.style.overflow = 'hidden';
else document.body.removeAttribute('style');
return () => {
document.body.removeAttribute('style');
};
}, [open]);
This issues is terrible, mostly because it doesn't have a good answer. In 6 years, there are a lot of browser versions out there, some of them with this unfortunate behavior (or bug).
Best scenario is to add a library to handle this, but I'm not sure if it would cause too much trouble on existing projects.
A nice implementation is to provide a simple component that can extend react-modal.
const Modal = (props) => {
return (
<ReactModal {...props}
onAfterOpen={() => libToBlockScroll()}
onRequestClose={() => (libToUnblockScroll(), props.onRequestClose())}
>{props.children}</ReactModal>
);
}
If anyone want to help with this, with some ideas, I'd appreciate.
I've added a z-index to the overlay and it prevents the parent from scrolling. Maybe this isn't the solution you were looking for but it works for me in all browsers I've tested so far (I don't know if it works on iOS)
For those of you who want a solution that doesn't cause the scrollbar to disappear, we are using this solution in our library.
export function useFixedBody(isOpen: boolean) {
useEffect(() => {
if (isOpen) {
const x = window.scrollX;
const y = window.scrollY;
const disableScroll = () => {
window.scrollTo(x, y);
};
window.addEventListener('scroll', disableScroll);
return () => {
window.removeEventListener('scroll', disableScroll);
};
}
}, [isOpen]);
}
For those of you who want a solution that doesn't cause the scrollbar to disappear, we are using this solution in our library.
export function useFixedBody(isOpen: boolean) { useEffect(() => { if (isOpen) { const x = window.scrollX; const y = window.scrollY; const disableScroll = () => { window.scrollTo(x, y); }; window.addEventListener('scroll', disableScroll); return () => { window.removeEventListener('scroll', disableScroll); }; } }, [isOpen]); }
This seems like the simplest most straight forward solution. I just wonder if this potentially causes cross compatibility issues
Although this solution is simple, there are libraries out there that can handle this. It should be preferred because they may have fixes some quirks related to browsers and their versions.
For those of you who want a solution that doesn't cause the scrollbar to disappear, we are using this solution in our library.
export function useFixedBody(isOpen: boolean) { useEffect(() => { if (isOpen) { const x = window.scrollX; const y = window.scrollY; const disableScroll = () => { window.scrollTo(x, y); }; window.addEventListener('scroll', disableScroll); return () => { window.removeEventListener('scroll', disableScroll); }; } }, [isOpen]); }
If the content in the modal is too long there are two scrollbars. So this fix is also not perfect.
You may say that modal height should be limited. But it's not possible when you want to have a form that has a multi-select field with no limited amount of values.