Как сделать scroll без overflow?

Question

[Scalletta]

Есть меню, у него height: 100vh , сейчас приложу мерзкий чертеж, не обижайтесь плиз, ну не могу я скрин приложить.

Меню во всю высоту окна, в меню идут разные иконки (ссылки на другие страницы), некоторые иконки имеют выпадающие блоки. При наведении появляется блок с какой нить инфой.
Эти блоки я сделал абсолютами и при наведении они получают display: block. При адаптиве, на меньших экранах меню не влазиет. Иконки начинают становиться в два ряда, было решено сделать скролл, т.е. при меньшем экране у меню появляется скролл (это не мое решение). Я добавил скролл.
.left-menu(height: 100vh, overflow-y: auto)
.left-menu__wrap
ul>li*x>a

Скролл работает, но косяк в том, что он обрезает блоки которые появляются при ховере т.к. они выходят за пределы родителя. Что делать?

Comments

[Сергей delphinpro]

Генерить всплывашки скриптами в отдельном слое за пределами блока меню, позиционировать также скриптами.

[Scalletta]

Сергей, я начал думать писать свой скролл, но Ваш вариант лучше и проще, возможно он окажется единственным верным

Answer 1

[Anton fon Faust]

Варианты решения:
1) Прописать нормальный css, который будет выпадающие меню показывать ниже и вертикально (ну, где ж вы видели на мобилках-то такую ересь с выпадающими в бок подменюшками?)))

2) Не прописывать body/html overflow: hidden, а прописать это дело какому-нибудь блоку-wrapper'у. По клику/тапу на пункт меню (если уж хотите боковушки, хотя ересь) - берите или координаты таргета, или координаты события и показывайте блок субменю с position: fixed