Question

我仅使用CSS设置了灯箱，并且我的图像比视口长。背景正在滚动，但是图像却没有。

我尝试将溢出更改为各种不同的设置并在不同的选择器上进行任何操作。我真的很陌生，不知道我是否只是在犯一个简单的错误。我读过有类似问题的线程，但是提供的解决方案也不起作用。

这是我当前处于活动状态的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和覆盖尺寸的组合导致了此问题。将元素设置为固定位置会将其从文档其余部分的滚动上下文中删除。要解决此问题，您需要使用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>

CSS灯箱内容垂直滚动

1 个答案:

这里有个例子：