Hey,
I’ve been looking into the relatively new overscroll-behavior property, and have tried to use it on my current project. Basically I have an overlay that opens, it’s full width and height using 100vw and 100vh. It’s fixed positioned and left top. When viewing the overlay and performing a scroll on it, then the underlying page is scrolled.
I expected using this new property would stop this from occurring. I have made a demo here: https://codepen.io/rctneil/pen/rJYONj
I have tried the demo that Google Chrome Dev shows with the chatbox. That works as expected, the only difference is that the chat window has an element that is scrollable. If I add overflow: hidden to that message window then it performs exactly the same as I have encountered.
Reading through the spec it states: “If a scroll container has no potential to scroll, because it does not overflow in the direction of the scroll, the element is always considered to be at the scroll boundary.”
This sounds to me like it should still take effect even though the element has no content to scroll but it doesn’t.
I know there are other methods to stop this scroll effect from happening and I will be using one of those but I wanted to try this new property out.
Is this how it is expected to work or is it a bug that I can report?
Kind regards,
Neil
