Prevent Body Scrolling on Mobile Navigation Open

Design help Custom code
4

First, remove the 200vh height (Use 100vh). Next try this (± your idea):

Better Solution // PURE CSS // No custom code

On the forum you find solutions with overflow: hidden; on body.

body.noScroll {
      overflow: hidden;
}

“The problem”

It automatically scrolls everything to the top (Bad User Experience)

Try this idea/Code (Almost the same):

 html, body {
        height: 100%;
    }
                
    .overlay{ //your fullscreen mobile navigation 
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.8);

        .overlay-content {
            height: 100%;
            overflow: scroll;
        }
    }
    
    .background-content{
        height: 100%;
        overflow: auto;
    }

Docs her: GitHub - Luxiyalu/scrollable-overlay: A simple demo of solving the scrollable overlay problem with pure CSS
Demo: Scrollable Overlay