How can I unable scroll in javascript?

Viewed 176

When I created navbar on my project I noticed that I can scroll on the website

and what I decided to do is to can noscroll function when the user will open navbar

function noscroll() {
  window.moveTo(0, 0);
}

function menutoggle() {
  if (menuItems.style.maxHeight == '0%') {
    menuItems.style.maxHeight = '30%';
    window.addEventListener('scroll', noscroll);
  } else {
    menuItems.style.maxHeight = '0%';
    // How can I unable to scroll here?
  }
}
3 Answers

one solution can be: while nav is open wrap it with another div and then make that div position absolute. Hence it will be outside of the document flow. then give it a height of 100vh width 100vw. After that place, your main nav bar as you like inside the parent div.

This would work I suppose:

function noScroll() {
  window.scrollTo(0, 0)
}

window.addEventListener('scroll', noScroll)

Setting the value to scroll, the overflow is clipped and a scrollbar is added to scroll inside the box. Note that this will add a scrollbar both horizontally and vertically (even if you do not need it):

overflow: scroll;

use of overflow

Related