CSS лайтбокс контента вертикальная прокрутка

Question

Я установил лайтбокс с использованием только CSS, и мои изображения длиннее, чем область просмотра. Фон прокручивается, а изображения - нет.

Живой сайт: https://hwestdesign.com

Я пытался изменить переполнение на различные параметры и на разных селекторах, но ничего не работает. Я действительно новичок в этом, и я не знаю, просто делаю ли я простую ошибку. Я читал темы с похожими проблемами, но предоставленные решения тоже не работают.

Это код CSS, который у меня сейчас активен:

.thumbnail {
max-width: 100%;
}

.lightbox {
display: none;
width: 300px;
height: 300px;
overflow: scroll;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
padding:10px;
text-align: center;
background: rgba(0,0,0,0.8);

}

.lightbox img{
max-width: none;
margin-top: 2%;
overflow-y: visible;
height: auto;
    }


.lightbox:target {
outline: none;
display: block;
overflow: visible;

}

Это HTML:

<div class="grid-item item1">
        <a href="#img1"><img src="images/covers/hwest.jpg" class="thumbnail"></a>
        <a href="#_" class="lightbox" id="img1"><img class="lightbox-content" src="images/hwestbranding.jpg"></a>
    </div>

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

Answer 1

Сочетание position:fixed и размера наложения вызывает проблему. Установка элемента в фиксированное положение удаляет его из контекста прокрутки остальной части документа. Для решения этой проблемы вам нужно дать лайтбоксу container новый контекст прокрутки, используя свойство overflow.

Примечание: вам нужно поместить курсор мыши (событие указателя) НАД лайтбоксом / модальным образом, чтобы вызвать прокрутку. В противном случае действие «прокрутка» перейдет к документу ниже

---

Вот пример:

И ссылка на codepen , поскольку его здесь немного сложно увидеть.

body {
	min-height:300vh;
	background: url(https://images.unsplash.com/photo-1559291001-693fb9166cba) left top repeat;
}

.modal {
    /* dark background overlay helps to position content */
	position: fixed;
	top:0; right:0; bottom:0; left:0;
	background-color: rgba(0,0,0,0.6);
}

.modalInner {
  /* put the white box in the right place */
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
  /* define how big it is before scrolling */
	width: 80vw;
	height: 80vh;
	overflow-y: scroll;
  /* look & feel */
	background-color: #ffffff;
	padding: 20px;
	border: 1px solid #000;
}

<div class="modal">
	<div class="modalInner">
		<img src="https://images.unsplash.com/photo-1560010871-220685e68662" width="100%" />
	</div>
</div>