скрытая проблема переполнения в react js (интерфейс)

#css #frontend

Вопрос:

[вы можете видеть, что последняя ссылка скрыта из виду] Я создаю мобильное меню в React Js;

 const [menuOpen, setMenuOpen] = useState(false);

 // when i toggle menuOpen , **my sidebar** (mobile Menu) show/hides;

 if (menuOpen) {
    document.body.style.overflow = "hidden";
  } else {
    document.body.style.overflow = "initial";
  }
 

этот приведенный выше код останавливает прокрутку при открытии меню.

все работает нормально. но теперь, когда я добавил подменю и подменю, пункты меню исчезают с экрана.

когда я использую прокрутку переполнения на боковой панели(элемент боковой панели мобильного меню), она не работает(прокрутка).

Итак, существует ли какое-либо правило, согласно которому дочерние элементы не могут прокручиваться, если переполнение родительского элемента скрыто.

Ответ №1:

Вам нужно добавить максимальную высоту в контейнер, который окружает навигацию, а затем настроить его так, чтобы он отображал полосу прокрутки, это гарантирует, что contaienr не будет выходить за пределы экрана, как вы испытываете.

 .your-container {
    max-height: 100%;
    overflow-y: scroll;
}