CSS lightbox内容垂直滚动
CSS lightbox内容垂直滚动
提问于 2019-06-10 00:29:56
我只用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>加载时，会弹出灯框并进行滚动，但只有灯框下面的背景才会滚动。图像是较长的，我希望能够滚动的图像只垂直。现在他们是正确的大小，但固定。我试着改变他们的位置和溢流，但什么也没做
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-10 01:40:31
position:fixed和叠加大小的组合导致了问题。将元素设置为固定位置会将其从文档其余部分的滚动上下文中删除。要解决这个问题，您需要使用overflow属性为lightbox 容器提供一个新的滚动上下文。
注意:您需要将鼠标光标(指针事件)特别放在lightbox/modal上以引起滚动。否则，"scroll“操作将传递到下面的文档
下面是一个例子：
还有一个到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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56516371
复制相关文章
相似问题