Allow configuring the scroll lock target element
Feature request
Summary
Allow configuring which element gets scroll-locked when a modal popup (Dialog, Drawer, etc.) is open. Today the lock always applies to the document (<html> / <body>), with no way to target a different scroll container.
This could be configurable globally (once for the whole app) and/or per component (for a specific popup).
Examples in other libraries
- usehooks-ts
useScrollLockaccepts alockTargetoption (an element or selector, defaulting todocument.body): https://usehooks-ts.com/react-hook/use-scroll-lock
Motivation
Many app layouts don't scroll the document. The page is a fixed-height shell (header, sidebar) and the main content scrolls inside a div. In that setup, opening a modal locks <body>, which isn't scrolling, while the actual scroll container stays scrollable behind the popup.
A global setting would cover the common case of an app with a single main scroll container. A per-component option would handle exceptions, such as a popup opened from a nested scrollable panel.
Source: mui/base-ui