頁(yè)面上有一個(gè)菜單按鈕。當(dāng)用戶(hù)點(diǎn)擊按鈕時(shí)，整頁(yè)菜單打開(kāi)。有一個(gè)問(wèn)題——主內(nèi)容頁(yè)面自動(dòng)滾動(dòng)到頂部。你能建議我如何預(yù)防它嗎？我在這里已經(jīng)檢查過(guò)一個(gè)類(lèi)似的問(wèn)題，如何在手機(jī)菜單打開(kāi)時(shí)禁用后臺(tái)滾動(dòng)？，但不是位置:固定或溢出:隱藏幫助

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>

我認(rèn)為你的主體元素是靜態(tài)定位的(或者如果定義的話(huà)是相對(duì)的？)，直到您通過(guò)覆蓋固定位置來(lái)更改它。

一個(gè)更好的做法是讓你的導(dǎo)航容器處于絕對(duì)開(kāi)啟狀態(tài)。菜單打開(kāi)& quot并讓其余的元素留在它們已經(jīng)定義的流中，這樣你的全屏幕就簡(jiǎn)單地覆蓋了其余的元素。

以我的經(jīng)驗(yàn)(大多是WordPress)，event . prevent default()；成功了。您基本上覆蓋了單擊鏈接時(shí)的默認(rèn)行為——這將在頂部打開(kāi)一個(gè)頁(yè)面。

以這種方式使用:

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