CSS overscroll-behavior does not work when scroll container has no overflow
Categories
(Core :: Layout: Scrolling and Overflow, defect, P3)
Tracking
()
People
(Reporter: sime.vidas, Unassigned)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/116.0
Steps to reproduce:
- Open https://codepen.io/rctneil/pen/rJYONj?editors=0100
- try to scroll the page
Actual results:
The page scrolled.
Expected results:
The page should not have scrolled.
The fullscreen overlay has the following styles:
overflow: hidden;
overscroll-behavior: contain;
This means that it’s a scroll container and that scroll chaining is disabled. Therefore, the page behind the overlay should not scroll.
The corresponding Chromium bug: https://bugs.chromium.org/p/chromium/issues/detail?id=813094
|
||
Comment 1•1 year ago
|
||
The Bugbug bot thinks this bug should belong to the 'Core::Layout: Scrolling and Overflow' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.
|
||
Updated•1 year ago
|
|
|
||
Comment 2•1 year ago
|
||
Thanks for the detailed bug report! Marking as S3/P3 since my testing on chrome canary seems to indicate the issue still exists there.
Use JavaScript to prevent background scrolling:
javascript
function showOverlay() {
document.getElementById('overlay').style.display = 'block';
document.body.style.overflow = 'hidden'; // Prevent background scrolling
}
function hideOverlay() {
document.getElementById('overlay').style.display = 'none';
document.body.style.overflow = 'auto'; // Restore background scrolling
}
This serves as a workaround until the browser bug is fixed. For more tips on handling scrollbars in CSS, check out my blog post: (https://forfrontend.com/how-to-show-scrollbar-on-hover-in-css/).
Description
•