結果應該是一個漢堡選單，單擊圖示時從右側滑入。
這是主選單的代碼，我將其翻譯為右側 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';
}
問題是當關閉時，用戶仍然可以水平向右滾動。這應該是不可能的，因為選單應該被隱藏并且不應該水平滾動。
uj5u.com熱心網友回復：
最簡單的方法是替換position: absolute為position: fixed. 這解決了問題，但仍允許頁面在需要時水平滾動。
或者，您可以添加
body {
overflow-x: hidden;
}
洗掉水平滾動條。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/480872.html
標籤：javascript html css 有角度的