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

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 итак отработает его.

[123KODer321]

Сергей Горячев, Чел ему проосто выдали код

body {
    overflow: hidden;
}

со словами

Это работает, а если нет, смотреть пункт первый и вообще ты не прав

Я с схожей ситуацией вставляю себе и вижу что оно не работает, ищу дальше, вижу что автор вопроса нашел ответ.

Я про что

точно также, как тебе и советовали

...
Код

body {
    overflow: hidden;
}

и код

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

Это не одно и тоже...