CSS 灯箱内容垂直滚动

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 属性为灯箱 container 提供新的滚动上下文。

注意：您需要将鼠标光标（指针事件）放在 lightbox/modal 上，以专门引起滚动。否则，"scroll" 操作将传递到下面的文档

这是一个例子：

还有一个 link 到 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 灯箱内容垂直滚动

CSS lightbox content vertical scrolling

html

css

overflow

这是一个例子：