[feature]: Prevent the body of the page from scrolling while the menu is open

[luke-denton-aligent]

Is your feature request related to a problem? Please describe. Two related issues: As a user, when I open the mobile menu, I find that I'm still able to scroll the background page. As a user, when I open a modal, I find that I'm still able to scroll the background page.

Describe the solution you'd like When the menu is open, lock the page from scrolling, so that I can only scroll the inner content of the menu. Prevent repaint by compensating for the loss of the vertical scrollbar when

Additional context

Please excuse this recording - I was trying to capture it against veniw.magento.com, however kept running into a bug that would cause the page to re-render, and not render cart items, despite items still being in my cart. It is possible to see that as soon as the modal opens, the scrollbar for the background page is still visible

Please let us know what packages this feature is in regards to:

• [x] venia-ui

[m2-assistant[bot]]

Hi @luke-denton-aligent. Thank you for your report. To help us process this issue please make sure that you provided sufficient information.

Please, add a comment to assign the issue: @magento I am working on this

---

• Join Magento Community Engineering Slack and ask your questions in #github channel.

[luke-denton-aligent]

I have been looking into the code for this, and can see that scroll lock is implemented, but commented out. So now I'm a bit confused what the expected behaviour is

[drpayyne]

Can someone please look into this? It seems rather simple. Thank you.

[anthoula]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.magento.com/browse/PWA-2847 is successfully created for this GitHub issue.

[anthoula]

Thank you for the feedback. From a UX perspective, it is ok to lock the background from scrolling when a side menu or a modal is open. We are tracking this internally but it is assigned a low priority. If you have figured this out and would like to contribute your solution back to core, we'd gladly accept it!

[huykon]

@magento I am working on this

[anthoula]

@adobe export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/PWA-2989 is successfully created for this GitHub issue.