Как победить проблемы с overflow-y: sсroll?

Question

[Максим Шадрин]

Всем привет!
Сделал меню, которое у нас скролится вертикально с помощью overflow-y: scroll.
Но не могу понять, почему при скроле меню вниз оно улетает за пределы экрана именно в такое положение.
Вроде бы по логике оно должно переставать скролиться, как только достигается конец контента, если я правильно понимаю. Ну или уж, если все наоборот, полностью уходить за пределы экрана, а тут останавливается на определенном моменте, и остается торчать сверху.
Можно ли как-то сделать, чтобы оно переставало скролиться, как только низ меню окажется внизу экрана?
Вот сам пример. Надо нажать на кнопку "Каталог"

Answer 1

[Александр]

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

1. Высота 100% работает по-разному в зависимости от, того в каком типе контейнера лежит. В Вашем случае достаточно ограничить контейнер через overflow: hidden у .global-catalogue-menu-wrapper и выставить height: 100% для внутренних оболочек. Или использовать flex/grid с настройкой высоты уже из них.
2. Скролл огромный потому, что у вложенных менюшек высота 100% установлена (.submenu-wrapper), если её убрать, то скроллу нормально. Ну кроме таких случаев:


Чтобы первый уровень меню переставал скроллится можно попробовать задать ему position: sticky к верху, но тогда не сможете проскролить вложенные менюшки.

Для удобного позиционирования можно попробовать заюзать floating-ui.

Ну и либо overscroll-behavior настройте, либо уберите скролл у body, а то скроллится и то, что под меню.

Answer 2

[Антон Антон]

.global-catalogue-menu-wrapper .first-level-menu .submenu-wrapper имеет высоту 100% и распирает контейнер от пункта "столы". Но даже если убрать - из-за третьего уровня меню столы->вешалки все равно останется свободное место, хоть и меньше. Нужно использовать абсолютное позиционирование и вычисление положения относительно экрана. Может быть какую-то библиотеку. Что использовать в данном случае - порекомендовать не могу. Сам использую vue + quasar - там попапы открываются +- нормально.

spoiler

скрин с кнопкой-активатором меню у нижнего края окна браузера: