How to Prevent Body Scroll Behind a Full-Height Mobile Nav Menu

selective focus photography of person using iphone x

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 position: fixed.

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.

Was the post helpful?

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: