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

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

删除水平滚动条。