Repository: material-ui
Issue: [material-ui][Popover] The `disableScrollLock` prop is causing issues with CSS and additional scrolling functionality
Labels: component: Popover,package: material-ui,support: docs-feedback

### See Live example to reproduce

Link to live example: [CodeSandBox Demo](https://codesandbox.io/p/sandbox/popover-issue-msjhmd?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clwgfald50006356jajo4q3cv%2522%252C%2522sizes%2522%253A%255B100%252C0%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clwgfald50002356jjzz7b4zx%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clwgfald50003356j4lmrxh6i%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clwgfald50005356j359oqonc%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B46.015096653064354%252C53.984903346935646%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clwgfald50002356jjzz7b4zx%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clwgfald50001356jubhrmj3h%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%257D%255D%252C%2522id%2522%253A%2522clwgfald50002356jjzz7b4zx%2522%252C%2522activeTabId%2522%253A%2522clwgfald50001356jubhrmj3h%2522%257D%252C%2522clwgfald50005356j359oqonc%2522%253A%257B%2522id%2522%253A%2522clwgfald50005356j359oqonc%2522%252C%2522activeTabId%2522%253A%2522clwgiteez00h3356jduj1jxjq%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%252C%2522id%2522%253A%2522clwgiteez00h3356jduj1jxjq%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clwgfald50003356j4lmrxh6i%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clwgfald50003356j4lmrxh6i%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Afalse%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D)



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](https://github.com/react-bootstrap/react-bootstrap/issues/2627)
- [#2249](https://github.com/preactjs/preact/issues/2249)
- [#8567](https://github.com/mui/material-ui/issues/8567)
- [#2866](https://github.com/mui/material-ui/issues/2866)
- [#11337](https://github.com/mui/material-ui/issues/11337)
- [#11413](https://github.com/mui/material-ui/issues/11413)
- [#8040](https://github.com/mui/material-ui/issues/8040)
- [#2360](https://github.com/tailwindlabs/headlessui/discussions/2360)
- [#2206](https://github.com/tailwindlabs/headlessui/discussions/2206)
- [#28082](https://github.com/mui/material-ui/issues/28082)
- [#19961](https://github.com/mui/material-ui/issues/19961)
- [#1159](https://github.com/radix-ui/primitives/issues/1159)
- [#18664](https://github.com/mui/material-ui/issues/18664)
- [#10072](https://github.com/mui/material-ui/issues/10072)

### Your environment

_No response_

**Search keywords**: popover, scroll, disableScrollLock