Or, how to prevent over-scroll when there is no original scroll
overscroll-behavior: contain should prevent scrolling of underlying elements in most cases. Sometimes it needs a little help.
In one of the projects I work on, we designed a full-height mobile nav menu. It was set to always cover the whole screen when open, with
min-height: 100vh and
It was all nice and easy, but then we noticed (or remembered) that when trying to scroll the nav menu the site scrolls behind it. This isn’t an optimal behavior.
overscroll-behavior: contain should fix it in most browsers, but I applied it, and it didn’t. This is because this property was designed to contain a scroll from chaining to underlying elements. In our case, there was nothing to contain, as there is was no scrolling available in the nav menu.
The solution is simple — fake a scroll. By giving the mobile menu child a 101% height we create a small, unnoticeable, scroll — which is then contained by
overscroll-behavior: contain and not chaining to the body.