React - Enable background scrolling when Material UI Dialog is open

Question

I've got a component that opens and closes a Material UI Dialog. At the moment, there is text that is displayed on the page followed by a button that simply opens the dialog. I've created a code sandbox to highlight where I am with this: https://codesandbox.io/s/formdialog-material-demo-forked-cgjgh?file=/demo.js:0-8775

When the dialog is open, is it possible to enable scrolling in the background (i.e. on the main page) so that the user can scroll through the text as an example? I've included the hideBackdrop prop to be true so that the backdrop is hidden, but I'm not sure how to to do it so the scrolling on the main page can be enabled.

@ParvathirajanNatarajan the solution provided by rakram works. — Adam
– Adam, Commented Oct 12, 2022 at 8:41

rakram · Accepted Answer · 2022-06-21 10:40:09Z

5

For me setting "disableScrollLock" property to true solved the problem. I found it under Material UI Modal documentation: https://mui.com/material-ui/api/modal/

<Dialog open={open} 
        onClose={handleClose} 
        hideBackdrop={true}
        disableScrollLock
  >

I tested it in your CodeSandbox example and it worked as it was supposed to. Hope this helps with your problem!

answered Jun 21, 2022 at 10:40

rakram

661 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

WebEXP0528 · Accepted Answer · 2022-01-19 16:00:10Z

1

Please disable overflow:hidden style property of body tag when opening dialog.

answered Jan 19, 2022 at 16:00

WebEXP0528

6014 silver badges10 bronze badges

2 Comments

Adam Over a year ago

Could you give me an example of what you mean?

WebEXP0528 Over a year ago

In global css, please add body{ overflow: auto !important; }

mohsin hussain · Accepted Answer · 2023-04-26 05:50:45Z

1

you can mange scrolling by using React Hook useEffect.

 const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event, item) => {
    setAnchorEl(event.currentTarget);
  };

  const open = Boolean(anchorEl);

Now whenever a click will happen "open" will be true OR you might be using some other state method to open the Material UI Dialog by managing state.

So here is the useEffect Method

 useEffect(() => {
    if (open) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "scroll";
    }
  }, [open]);

answered Apr 26, 2023 at 5:50

mohsin hussain

231 silver badge6 bronze badges

Collectives™ on Stack Overflow

React - Enable background scrolling when Material UI Dialog is open

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related