Material-ui: [Dialogs] scroll event not firing

[MatteoGioioso]

Dialogs with scroll=body do not fire scroll event

• [ X ] This is not a v0.x issue.
• [ X ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

It should fire the scroll event since is scrolling with the body

Current Behavior 😯

Not firing any event

Steps to Reproduce 🕹

https://codesandbox.io/s/7o2plqq440

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.2 |
| React | 16.8.5 |
| Browser | Chrome |

[eps1lon]

scroll="body" can be a bit misleading. It's not actually the body scrolling but the dialog. If you attach the listener to the dialog it should work.

[oliviertassinari]

@eps1lon What do you envision as a solution to this issue?

[eps1lon]

@eps1lon What do you envision as a solution to this issue?

Well either

1. document that scroll events only fire on the DOM node rendered by the Dialog
2. dispatch them manually (no implementation in mind)
3. or somehow make it actually work by changing the styling (can't use position: fixed for that I suppose; the body needs to actually scroll).

[oliviertassinari]

1. Sounds great to me.

[MatteoGioioso]

How about number 3?
I could help, or is too difficult to implement?

[oliviertassinari]

Maybe you can hack around, disable the portal, try a few style teaks.

[MatteoGioioso]

Ok, finally I have solved it like this:

I have modified some styles this way:

const styles = {
  root: {
    position: 'absolute'
  },
  scrollBody: {
    overflow: 'hidden'
  },
  container: {
    height: 'auto'
  }
};

And then use them in the Dialog component with disablePortal

<Dialog
        disablePortal
        classes={{,
          scrollBody: classes.scrollBody,
          root: classes.root,
          container: classes.container
        }}
        scroll="body"
        {...props}
      >
        {children}
      </Dialog>

And then I have found this 'hack' to modify the body style which was overflow: hidden every time the dialog was open

  useEffect(() => {
      if(open){
        document.body.style.overflow = 'auto'
      }
    }, [open]);

I personally do not really like the last step, is there any better way to change the style of the body?

[oliviertassinari]

Why do you need this behavior?

For the overflow part, you can use the disableScrollLock prop.

[MatteoGioioso]

I had this virtualized list that for some reason worked only with window scroll.

[oliviertassinari]

OK, thanks for the details. I'm closing. It's not very important. You should be able to have a container scroll listener.

Regarding the scroll values that the dialog accepts. I have created a note for v5, in case we want to improve the wording.