Want a navbar stop-CodePudding

I did a navbar that shows on the click event listener and I want everything in the background to have a mask on also I want this navbar to prevent the page from scrolling down. Only when I exit the navbar. I couldn't figure out how to do it.

#leftmenue {
  background-color: rgb(255, 255, 255);
  border-radius: 2px;
  height: 100%;
  width: 28%;
  padding: 0;
  position: absolute;
  top: 0;
  z-index: 1000;
  opacity: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: 1.5s;
  display: block;
}

<nav>
  <span>Electronics & Perephiral Devices</span>
  <li><a href="">Gaaming Setup</a><i ></i> </li>
  <li><a href="">Gaaming Setup</a><i ></i></li>
  <li><a href="">Gaaming Setup</a><i ></i></li>
</nav>
<nav>
  <span>Perephiral Devices</span>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
</nav>
<nav>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
  <li><a href="">Gaaming Setup</a></li>
</nav>
</div>

CodePudding user response：

you can reach this through

document.querySelector('html').style.overflow = 'hidden';