fix(overlay): modal and page overlay should not allow body scroll #5710
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🦋 Changeset detectedLatest commit: efabcf9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
📚 Branch Preview🔍 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
Contributor
Tachometer resultsChromeoverlay permalinkbasic-test
directive-test permalink
element-test permalink
lazy-test permalink
Firefoxoverlay permalinkbasic-test
directive-test permalink
element-test permalink
lazy-test permalink
|
nikkimk
approved these changes
Aug 26, 2025
Contributor
nikkimk
left a comment
nikkimk
left a comment
There was a problem hiding this comment.
LGTM with one nit on the changeset.
.changeset/grumpy-doors-worry.md
Outdated
| '@spectrum-web-components/overlay': minor | ||
| --- | ||
|
|
||
| **Fixed** : add body scroll prevention for modal and page overlays. Automatically block body scroll when modal or page overlays are open and restore the original scroll state when they are closed, improving user experience and accessibility for modal dialogs. |
Contributor
There was a problem hiding this comment.
nit: Our writing changeset docs recommend using past tense.
Suggested change
| **Fixed** : add body scroll prevention for modal and page overlays. Automatically block body scroll when modal or page overlays are open and restore the original scroll state when they are closed, improving user experience and accessibility for modal dialogs. | |
| **Fixed** : Added body scroll prevention for modal and page overlays. Overlay automatically blocks body scroll when modal or page overlays are open and restores the original scroll state when they are closed, improving user experience and accessibility for modal dialogs. |
Contributor
rubencarvalho
left a comment
rubencarvalho
left a comment
There was a problem hiding this comment.
Solution looks great! 🚀 I just left one small comment about creating a more “e2e” style test to verify the scroll blocking.
| ).to.be.false; | ||
| }); | ||
|
|
||
| it('blocks body scroll when modal overlay is opened and restores when closed', async function () { |
Contributor
There was a problem hiding this comment.
nit: could we also add a behavioral test that verifies the page actually can’t scroll while the modal is open (and can again after it closes)? Right now we’re checking the body overflow style, which is fine, but it’s still an implementation detail. I was thinking we could create a long enough page, attempt a scroll (e.g. window.scrollTo), and assert on window.scrollY.
Contributor
Author
There was a problem hiding this comment.
Certainly we can. Excellent suggestion!. We haven't explored these tests yet on our patterns but would love to add these for others too.
Rajdeepc
added
Needs Re-review
and removed
Status: Ready for review
Contributor
rubencarvalho
left a comment
rubencarvalho
left a comment
There was a problem hiding this comment.
One little await and we can 🚢 it!
packages/overlay/test/index.ts
Outdated
|
|
||
| // Close modal overlay | ||
| const closed = oneEvent(modalTrigger, 'sp-closed'); | ||
| sendMouse({ |
Contributor
There was a problem hiding this comment.
Suggested change
| sendMouse({ | |
| await sendMouse({ |
rubencarvalho
approved these changes
Aug 28, 2025
lehelen19
pushed a commit
to lehelen19/spectrum-web-components
that referenced
this pull request
Oct 27, 2025
…roll (adobe#5710)" This reverts commit ee1bae6.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR implements body scroll blocking functionality for modal and page overlays to prevent background content from scrolling while overlays are open
Motivation and context
Changes Made
Core Functionality
manageBodyScroll()method inOverlayStack.tsthat automatically blocks body scroll when modal or page overlays are presentbodyScrollBlockedflag andoriginalBodyOverflowpreservationImplementation Details
'modal' or type: 'page'is added to the stackdocument.body.style.overflowvalueRelated issue(s)
Screenshots (if appropriate)
Desktop
Mobile
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
"modal" and "page" overlay should not have page scroll
Device review