页面上有一个菜单按钮。当用户点击该按钮时，将打开全页菜单。有一个问题-主要内容页面自动滚动到顶部。你能告诉我如何预防它吗？我已经在这里检查了一个类似的问题How to disable scrolling in the background when the mobile menu is open?，但也没有position：fixed或overflow：hidden帮助

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>

也无济于事。