Able to scroll over body when Dialog is open

[malavikaramprasad]

trafficstars

Code of conduct

• [X] I agree to follow this project's code of conduct.

Description of issue

When a Dialog is opened, users are able to scroll through the document body behind. Add ability to provide a boolean (eg: bodyScroll) option that when set to true/false can alter the scrolling behavior.

https://github.com/adobe/spectrum-web-components/assets/31526040/23532e19-2ac0-44c3-9cae-07d237c37898

[Westbrook]

As of now, a consuming application could leverage something like the following to achieve this locally:

document.addEventListener('sp-opened', e => {
  if (e.detail.interaction !== 'modal' && e.detail.interaction !== 'page') return;
  document.documentElement.style.overflow = 'clip';
    document.documentElement.style.scrollbarGutter = 'stable';
});
document.addEventListener('sp-closed', e => {
  if (e.detail.interaction !== 'modal' && e.detail.interaction !== 'page') return;
  document.documentElement.style.overflow = 'initial';
    document.documentElement.style.scrollbarGutter = 'initial';
});

This leverages JS to apply style, but you can swap to a class based system as you application allow to ensure that you and your application have full control over how the page shifts or doesn't when swapping between the scroll and the no scroll contexts.

[mirafedas]

@Westbrook Hi, thank you for this idea. The scrollbar gutter is not supported in Safari: https://caniuse.com/mdn-css_properties_scrollbar-gutter , is there any solution for this?