Как устранить поднятие скролла наверх при открытии меню

Question

На странице есть кнопка меню, при нажатии открывается навигация на всю ширину экрана. Когда я открываю меню основная страница прокручивается наверх. Как сделать так, чтобы при открытии и закрытии меню пользователь смог продолжить смотреть основную страницу с того места, на котором остановился. Нашел информацию здесь https://stackoverflow.com/questions/27230955/how-to-disable-scrolling-in-the-background-when-the-mobile-menu-is-open, но способ с position: fixed; overflow: hidden; height: 100vh не помогли. Подскажите, пожалуйста, как исправить

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

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

<html>
  <body class="root">
    <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">Меню 1</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">Меню 2</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">Меню 3</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">Меню 4</a>
                        </div>
                        <div class="menu__item">
                            <a class="menu__item-link">Меню 5</a>
                        </div>
                    </nav>
                </div>
            </div>
        </header>
  </body>        
</html>

.

Answer 1

Необходимо применить стили для html и body:

html.noscroll {
  overflow: hidden;
}

body.noscroll {
  overflow: visible;
  height: 100%;
}

И добавить их при открытии меню:

const menuOpen = document.querySelector('.menu-open');
const menuClose = document.querySelector('.menu-close');
const body = document.querySelector('.root');
const root = document.getElementsByTagName('html')[0];

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

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

БЛОГ НА HUSL

Как устранить поднятие скролла наверх при открытии меню

Ответы (1 шт):