Page under the navigation menu is scrolling

Question

I created a responsive navigation bar with html, css and javascript. When width of page is less than 768px the bars icon is displayed and when it is clicked the navigation menu appears. The problem is when the navigation menu appears, the page is still scrolling in the background. That scrolling under the navigation menu should stop.

 const button1 = document.getElementsByClassName("button")[0]; const navLinks1 = document.getElementsByClassName("navLinks")[0]; button1.addEventListener('click', () => { navLinks1.classList.toggle('active') })

 * { box-sizing: border-box; text-decoration: none; list-style: none; padding: 0; margin: 0; font-family: 'Prompt', sans-serif; }.logo { display: block; padding: 1rem; color: whitesmoke; } nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: blueviolet; z-index: 5; } nav ul { display: flex; } nav ul li a { padding: 1rem; display: block; color: whitesmoke; } nav ul li a:hover { background-color: rgb(48, 0, 94); }.button { position: absolute; top: 0.5rem; right: 0.5rem; display: none; color: whitesmoke; }.content { margin-top: 5rem; text-align: center; } @media screen and (max-width: 786px) {.button { display: block; font-size: 2rem; } nav { flex-direction: column; }.navLinks { display: none; flex-direction: column; width: 100%; text-align: center; margin-top: 2rem; }.navLinks.active { display: flex; height: 100vh; } }

 <header> <nav> <div class="logo">Logo</div> <a href="#" class="button" id="btn"><i class="fa fa-bars"></i></a> <ul class="navLinks"> <li><a href="#" class="key1" id="active">Home</a></li> <li><a href="#" class="key2">About</a></li> <li><a href="#" class="key3">Blog</a></li> <li><a href="#" class="key4">Contact</a></li> </ul> </nav> </header> <div class="content"> <h1>Content</h1> <h2>More content</h2> </div> <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content

Answer 1

Add a class to the body when menu is open, Like this:

document.body.classList.toggle("active");

Also add overflow: hidden; to it...

body.active {
  overflow: hidden;
}

 const button1 = document.getElementsByClassName("button")[0]; const navLinks1 = document.getElementsByClassName("navLinks")[0]; button1.addEventListener('click', () => { navLinks1.classList.toggle('active'); document.body.classList.toggle("active"); })

 * { box-sizing: border-box; text-decoration: none; list-style: none; padding: 0; margin: 0; font-family: 'Prompt', sans-serif; } body.active { overflow: hidden; }.logo { display: block; padding: 1rem; color: whitesmoke; } nav { position: fixed; top: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; background-color: blueviolet; z-index: 5; } nav ul { display: flex; } nav ul li a { padding: 1rem; display: block; color: whitesmoke; } nav ul li a:hover { background-color: rgb(48, 0, 94); }.button { position: absolute; top: 0.5rem; right: 0.5rem; display: none; color: whitesmoke; }.content { margin-top: 5rem; text-align: center; } @media screen and (max-width: 786px) {.button { display: block; font-size: 2rem; } nav { flex-direction: column; }.navLinks { display: none; flex-direction: column; width: 100%; text-align: center; margin-top: 2rem; }.navLinks.active { display: flex; height: 100vh; } }

 <header> <nav> <div class="logo">Logo</div> <a href="#" class="button" id="btn"><i class="fa fa-bars"></i></a> <ul class="navLinks"> <li><a href="#" class="key1" id="active">Home</a></li> <li><a href="#" class="key2">About</a></li> <li><a href="#" class="key3">Blog</a></li> <li><a href="#" class="key4">Contact</a></li> </ul> </nav> </header> <div class="content"> <h1>Content</h1> <h2>More content</h2> </div> <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content <br> <br> <br> Content