Slide in hamburger menu adds horizontal scrollbar

Issue

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" class="mobile-nav">
  <div class="mobile-nav-header">
    
    </div>
    <div class="hamburger">
      <button (click)="closeMenu()">
        <img src="../../assets/icons/close-menu.svg" alt="" />
      </button>
    </div>
  </div>
  <ul class="links">
    
  </ul>
  <div class="socials">
    
  </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.

Solution

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.

Answered By - Maximouse