Как лучше всего остановить прокрутку страницы в раскрывающемся меню

Question

У меня есть раскрывающееся меню на мобильном телефоне, где страница прокручивается вверху, когда я открываю меню.

Как лучше всего решить эту проблему? вот пример

Пробовал:

<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
  <a id="mobile-nav" href="#">
    <div class="container1" onclick="myFunction(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </a>
  <script>
    function myFunction(x) {
      x.classList.toggle("change");
      document.body.classList.toggle("body-overflow");
    }
  </script>
</div>

Не работал.

Добавлен css:

.body-overflow {
   overflow: hidden;
}

Не сработало.

Я понял, что есть две перекрывающиеся области с возможностью прикосновения или прокрутки. Прикосновение к области меню позволяет переместить страницу за ним. Так есть ли способ создать атрибут z-index?

Answer 1

Ваша ссылка указывает на #, который является способом ссылки на элемент на той же странице. Пустой фрагмент (#) ссылается на верхнюю часть страницы, вызывая прокрутку браузера. (Если вы установили ссылку на #some-section, браузер перейдет к элементу с идентификатором some-section).

Итак, в вашем случае вам нужно изменить обработчик кликов на:

onclick="myFunction(this); return false;">

Это заставляет возвращаемое значение обработчика событий возвращать false, что сигнализирует браузеру, что поведение браузера по умолчанию (прокрутка) не должно выполняться.

Ваш код изменен:

<div class="module widget-handle mobile-toggle right visible-sm visible-xs">
  <a id="mobile-nav" href="#">
    <div class="container1" onclick="myFunction(this); return false;">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </a>
  <script>
    function myFunction(el) {
      el.classList.toggle("change");
    }
  </script>
</div>

Другая проблема (меню с перемещением содержимого страницы вниз) может быть решена с помощью следующего CSS:

#site-navigation {
  visibility: visible;
  opacity: 1;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  transition: none;
  transform: none;
}

Answer 2

Я могу придумать несколько способов решить эту проблему. Один из способов - сделать верхнюю планку липкой. Другой вариант - исправить всю вашу навигацию. Еще вы можете попробовать отключить прокрутку основного элемента при раскрытии меню. У каждого из них есть свои плюсы и минусы, и вам, возможно, придется поэкспериментировать с ними, чтобы найти, что лучше всего подходит для вас.