Как запретить скролл сайта, если поверх него есть фиксированный блок с прокруткой вниз?

Question

[Александр]

Задача:
На мобильной версии сайта сделать меню поверх всего сайта.
Делаю просто, пример:

.menu {
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    background: blue;
    overflow-y: scroll;
}

Внутри этого блока длиный список меню. (ul)
Все хорошо, только есть одна проблема:
После прокрутки меню начинает прокручиваться сам сайт. Как этого избежать и прокручивать только блок с меню?

Answer 1

[iBird Rose]

задать для body {overflow: hidden;} когда этот блок активен

Comments

[Александр]

Пробовал - не помогает

[iBird Rose]

Александр: не может не помогать. значит не правильно пробуешь

[Александр]

iBird Rose: overflow: hidden - скрывает все, что находится ЗА ПРЕДЕЛАМИ элемента. Если его применить к body, в котором содержится куча контента (следовательно, элемент имеет большую высоту), то это никак не спасет ситуацию, потому что скроется все что находится ЗА ПРЕДЕЛАМИ body а не в нем.

В таком случае придется искусcтвенно выставлять высоту и ширину body

[iBird Rose]

Александр: зачем? если ты при открытии своего меню задашь для body overflow: hidden - то сайт перестанет скроллится просто. а твое меню уже нормально будет скролится. а если закрыть меню - то overflow для body возвращаешь

[Александр]

iBird Rose: попробуй на досуге, это так не работает.
Решил вопрос через:

html, body {
    overflow:hidden;
    height: 100vh;
}

[iBird Rose]

Александр: если у тебя весь сайт через absulute сделан, то да - body мб и может терять высоту. но на обычном сайте такое не нужно делать. попробуй даже тут на тостере в дебагере браузера задать overflow: hidden. никакую высоту ставить не нужно

[Сергей Горячев]

Александр: Ты решил вопрос точно также, как тебе и советовали. Не наводит на мысли, что первый раз ты сделал что-то не так?

[Сергей Горячев]

Александр: Хотя в случае, если указывается высота в vh, не обязательно делать это для html, body итак отработает его.