Slide in hamburger menu adds horizontal scrollbar-CodePudding

The result should be a hamburger menu with slides in from the right on clicking the icon.

This is the code for the main menu where I translate it to the right 100% and when I click on the icon it translates back to 0% bringing it on screen

HTML

<div id="mobilenav" >
  <div >
    
    </div>
    <div >
      <button (click)="closeMenu()">
        <img src="../../assets/icons/close-menu.svg" alt="" />
      </button>
    </div>
  </div>
  <ul >
    
  </ul>
  <div >
    
  </div>
</div>

.mobile-nav {
  height: 100vh;
  top: 0;
  position: absolute;
  transform: translateX(100%);
  right: 0;
  transition: 0.5s;
  background: white;
  z-index: 99;
}

The JS

openMenu() {
    var mobile_menu = document.getElementById('mobilenav');
    mobile_menu!.style.transform = 'translateY(0px)';
    // mobile_menu!.style.display = 'block';
  }
  closeMenu() {
    var mobile_menu = document.getElementById('mobilenav');
    mobile_menu!.style.transform = 'translateX(100%)';
    // mobile_menu!.style.display = 'none';
  }

The issue is that when closed, it is still possible for the user to scroll horizontally to the right. That should not be possible as the menu should be hidden and there should be no possibility to scroll horizontally.

CodePudding user response：

The simplest way is to replace position: absolute with position: fixed. This fixes the problem but still allows the page to be horizontally scrollable if needed.

Alternatively, you could add

body {
  overflow-x: hidden;
}

to remove the horizontal scrollbar.