箱形阴影不停留在滚动的位置

Question

我有一个灯箱 - div，这需要是position: fixed。在灯箱内有一些内容，包括图像。现在，当用户向下滚动时，box-shadow保持在,的位置是很重要的。此外，box-shadow必须在图像的前面。
尝试了一些z-index的东西，但无法弄清楚如何让它正常工作。

这是我Fiddle

#lightbox { 
 
    position: fixed; 
 
    top: 20%; 
 
    left: 20%; 
 
} 
 
div { 
 
    width: 150px; 
 
    height: 300px; 
 
    border: 1px solid blue; 
 
    overflow-y: auto; 
 
    overflow-x:hidden; 
 
    position: relative; 
 
} 
 

 
.shadow { 
 
    position: absolute; 
 
    top: 0; 
 
    left: -10px; 
 
    right: -10px; 
 
    bottom: 100%; 
 
    box-shadow: inset 0 10px 10px black, inset 0 -10px 10px black; 
 
    z-index: 100; 
 
}

<div id="lightbox"> 
 
    <div>content 
 
     <img src="http://placehold.it/100x250"/> 
 
     <img src="http://placehold.it/100x250"/> 
 
     <img src="http://placehold.it/100x250"/> 
 
     <div class="shadow"></div> 
 
    </div> 
 
</div>

Answer 1

你可以使用这个伪元素。我创建了一个在#lightbox DIV并给予90％的宽度（因此它不使用滚动条干扰）

#lightbox { 
 
    position: fixed; 
 
    top: 20%; 
 
    left: 20%; 
 
    overflow-y: hidden; 
 
} 
 
div { 
 
    width: 150px; 
 
    height: 300px; 
 
    border: 1px solid blue; 
 
    overflow-y: auto; 
 
    overflow-x: hidden; 
 
    position: relative; 
 
} 
 
#lightbox:before{ 
 
    position: absolute; 
 
    content:""; 
 
    top: 0; 
 
    left:0; 
 
    height:100%; 
 
    width:90%; 
 
    box-shadow: inset 0 10px 10px black, inset 0 -10px 10px black; 
 
z-index:8; 
 
}

<div id="lightbox"> 
 
    <div>content 
 
    <img src="http://placehold.it/100x250" /> 
 
    <img src="http://placehold.it/100x250" /> 
 
    <img src="http://placehold.it/100x250" /> 
 
    <div class="shadow"></div> 
 
    </div> 
 
</div>