頁面上有一個菜單按鈕。當用戶點擊按鈕時，整頁菜單打開。有一個問題——主內容頁面自動滾動到頂部。你能建議我如何預防它嗎？我在這里已經檢查過一個類似的問題，如何在手機菜單打開時禁用后臺滾動？，但不是位置:固定或溢出:隱藏幫助

const menuOpen = document.querySelector('.menu-open');
const menuClose = document.querySelector('.menu-close');
const body = document.querySelector('.root');

function lockScroll() {
    body.classList.add('lock');
}

function unLockScroll() {
    body.classList.remove('lock');
}

menuOpen.addEventListener('click', lockScroll);
menuClose.addEventListener('click', unLockScroll);

.lock {
  position: fixed;
  height: 100vh;
  overflow-y: hidden;
}

.menu-open {
  position: fixed;
  top: 0;
  right: 0;
  cursor: pointer;
  transition: all ease 0.6s;
  border: 0;
  background: none;
  padding: 1rem 1rem 2rem 2rem;
}

.nav-container {
  position: absolute;
  left: -100%;
  width: 100%;
  height: 100vh;
  background: #f5f5f1;
  z-index: 5;
}

<header class="header">
            <button type="button" class="menu-open"><img src="./images/menu.svg" alt=""></button>
            <div class="nav-container">
                <button type="button" class="menu-close"><img src="./images/close.svg" alt=""></button>
                <div class="menu__wrapper">
                    <div class="socials">
                        <img src="./images/logo.png" alt="" class="logo" title="">
                    </div>
                    <nav class="menu">
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a href="#males" class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">menu</a>
                        </div>
                    </nav>
                </div>
            </div>
        </header>

我認為你的主體元素是靜態定位的(或者如果定義的話是相對的？)，直到您通過覆蓋固定位置來更改它。

一個更好的做法是讓你的導航容器處于絕對開啟狀態。菜單打開& quot并讓其余的元素留在它們已經定義的流中，這樣你的全屏幕就簡單地覆蓋了其余的元素。

以我的經驗(大多是WordPress)，event . prevent default()；成功了。您基本上覆蓋了單擊鏈接時的默認行為——這將在頂部打開一個頁面。

以這種方式使用:

const menuOpenable = document.querySelectorAll(".menu-item-has-children");

menuOpenable.forEach((menuItem) =>
  menuItem.addEventListener("click", (event) => {
    const subMenu = event.target.parentElement.querySelector(".sub-menu");
    subMenu.classList.toggle("sub-menu--open");

    event.preventDefault(); // <-- Here
  })
);