Делаю модальное окно. Сейчас оно имеет вот такой вид:
<div>
<div class="background"/>
<div class="modal">
<div class="modalBodyWrapper">
<!-- Место для контента -->
</div>
</div>
<div/>
Стили CSS:
.background {
z-index: 990;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
}
.modal {
z-index: 1000;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
background-color: #fff;
width: 540px;
max-width: 100%;
padding: 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
border-radius: 5px;
}
.modalBodyWrapper {
display: flex;
flex-direction: column;
}
Всё это дело хорошо работает на маленьких окнах:
И, что вполне ожидаемо, отвратительно работает на окнах, которые длиннее, чем высота экрана:
Скроллинг не влияет, окно остаётся в таком же положении, сколько колёсико не крути.
Что необходимо:
Если окно очень длинное, то оно должно открываться вот так:
И должно прокручиваться (причём желательно, чтобы контент за окном не прокручивался) до конца:
Обратите внимание!
- Прокручивается не контент внутри модального окна, а само окно.
- Окно не просто прокручивается до конца, снизу него ещё и должен оставаться отступ.
- Нигде не должен отображаться ползунок прокрутки.
- Контент за окном не должен прокручиваться.
Каким образом мне следует изменить мой CSS, чтобы добиться такого результата?