Как сделать, чтобы скроллилось только модальное окно?

Question

[Владислав]

Есть модальное окно:

.modal {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    min-height: 100vh;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

При его открытии, на body вешается класс lock

body.lock {
    overflow-y: hidden;
}

Скролл у body убирается, но нет скролла и у модального окна, хотя его границы выходят за пределы экрана. Можно ли как-то исправить?

Comments

[IvanU7n]

а чем вариант с установкой overflow: auto для .modal и заменой min-height на обычный height там же не устроил?

[Владислав]

IvanU7n, а не устроил он меня, потому что я о нем не знал. Вот теперь знаю, и он меня устраивает. Спасибо

Answer 1

[andy_bro]

<div class="modal">
  <div class="modal-content">
    <!-- Содержимое модального окна -->
  </div>
</div>

Comments

[andy_bro]

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* Полупрозрачный фон для модального окна */
z-index: 2;
overflow-y: hidden; /* Запретить скроллирование body */
}

.modal::before {
content: "";
height: 100%;
width: 100%;
position: fixed;
}

.modal-content {
background-color: #fff;
margin: 10% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 400px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

/* Отобразить модальное окно, когда у него есть класс "active" */
.modal.active {
display: block;
}