Как запретить прокрутку контенту, а оверлею разрешить [закрыт]

25 декабря 2021, 04:10

Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Обновите вопрос так, чтобы он вписывался в тематику Stack Overflow на русском.

Закрыт 2 года назад.

Улучшить вопрос

Есть такая вёрстка https://mihinov.github.io/news/

При нажатии на меню, выходит оверлей и тегу body задается стиль overflow: hidden, который запрещает прокрутку всего body

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

Answer 1

Нужно фиксированному оверлею .burger__menu обнулить все координаты, а также контейнеру, в котором находились элементы, задать height: auto, а не 100%

Было:

.burger__menu {
    overflow: auto;
    width: 100%;
    min-height: 150vh;
    background-color: rgba(97, 93, 93, 0.95);
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    transition: transform .7s ease-in-out;
    z-index: 1;
}
.container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    height: 100%;
}

Стало:

.burger__menu {
    overflow-y: auto;
    width: 100%;
    background-color: rgba(97, 93, 93, 0.95);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform .7s ease-in-out;
    z-index: 1;
}
.container {
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
}
.burger__menu .container {
    padding: 10px 10px 60px 10px;
}