[material-ui][Popover] The `disableScrollLock` prop is causing issues with CSS and additional scrolling functionality

See Live example to reproduce

Link to live example: CodeSandBox Demo

https://github.com/mui/material-ui/assets/151521147/b46464bd-dc9b-474d-8f34-b66b162d911f

Current behavior

When the Popover is open without the disableScrollLock prop, is not allowing me to scroll through the page. In addition is adding padding-right and overflow:hidden to the body tag.

To prevent additional CSS from being apply to the body tag, I used disableScrollLock and also allows me to scroll on the page.
However this solution creates a second issue: **When the popover is active and the user still scrolls at a point where the button is not visible anymore, the popup remains open which i don't want **

I tried adding a useEffect hook to detect when the user scrolls more that 50 px and force the popover to close. Although it works it creates a 3rd issue where the popover is translated (moved) to the bottom left corner of the page for less than a second and then disappears.

Expected behavior

The required functionality is as follows:

• The user clicks on the button to open the popover.
• The user will be able to scroll while popover is open.
• An open popover should not apply any css to the body tag.
• When user scrolls more than 50px the popover should close (on spot, not at left bottom corner)
• When user clicks somewhere else on the screen the popover should close

Context

I checked all ANCIENT previous questions but cannot find solution. Most questions below are more than 6-7 years old. There should be a solution by now. Don't say is duplicate if the duplicate question doesn't even have a reply with a valid structured answer.

• #2627
• #2249
• #8567
• #2866
• #11337
• #11413
• #8040
• #2360
• #2206
• #28082
• #19961
• #1159
• #18664
• #10072

Your environment

No response

Search keywords: popover, scroll, disableScrollLock