在汉堡菜单中滑动添加水平滚动条

Question

结果应该是一个汉堡包菜单，单击该图标会从右侧滑入。

这是主菜单的代码，我将其向右移动 100%，当我单击该图标时，它会转换回 0% 并将其显示在屏幕上

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;
}

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';
  }

问题是关闭后，用户仍然可以向右水平滚动。这应该是不可能的，因为菜单应该是隐藏的，而且应该不可能水平滚动。

Answer 1

最简单的方法是将position: absolute替换为position: fixed。这解决了问题，但仍允许页面在需要时水平滚动。

或者，您可以添加

body {
  overflow-x: hidden;
}

删除水平滚动条。

在汉堡菜单中滑动添加水平滚动条

Slide in hamburger menu adds horizontal scrollbar

javascript

html

css

angular