我有一个带有半透明图像的 div 元素，position:fixed, top:0, left:0 和 height:100%。 在那个 div 下，我有可变数量的元素。
当元素数量足够大时，浏览器会显示滚动条，但由于固定的 div“覆盖”在元素上，因此无法滚动元素。
如何使固定 div 下的滚动成为可能？
代码:
CSS:
.vcBodyShadow{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(128, 128, 128, 0.80);
z-index:1;
}
#VCBody{
position:relative;
height:100%;
width:100%;
overflow:auto;
}
.vcElementContainer {
display:flex;
align-items:center;
justify-content:space-around;
flex-wrap: wrap;
height: $height;
width:$width;
overflow:hidden;
position:relative;
z-index:2;
background-color:lighten($default_blue,44%) !important;
min-height:100px;
}
".vcBodyShadow"是固定的 div，带有要在 #VCBody 上显示的阴影图像。
“#VCBody”是主容器。
.vcElementContainer 是元素的容器，位于#VCBody 中。
元素将显示在阴影之上，VCBody 和其他 html 代码位于其下。
Jquery 用所有元素在“#VCBody”上显示阴影:
$("#VCBody").prepend("<div class='vcBodyShadow'></div>");
HTML:
<html>
<body>
<div id="VCBody">
<div class="vcElementContainer"></div>
<div class="vcElementContainer"></div>
...
</div>
</body>
</html>
最佳答案
我有一个想法，与其将图像放在要滚动的元素上方，不如将其放在元素下方，具有相同的不透明度。
然后还要更改您正在滚动的 div 的不透明度。这将使它看起来像是在下面。
你会添加:
$(document).ready(function(){
$(document).on('click', function(){
$('#VCBody').prepend('<div class="vcBodyShadow">3</div>');
$('.vcElementContainer').css('opacity','0.5');
});
});.vcBodyShadow{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color: red;
z-index:1;
opacity: 0.5;
font-size: 100px;
font-weight: bold;
padding: 50px;
}
#VCBody{
position:relative;
height:100%;
width:100%;
overflow:auto;
}
.vcElementContainer {
display:flex;
align-items:center;
justify-content:space-around;
flex-wrap: wrap;
height: $height;
width:$width;
overflow:hidden;
position:relative;
z-index:2;
background-color:yellow;
min-height:100px;
margin:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="VCBody">
<div class="vcElementContainer">1</div>
<div class="vcElementContainer">2</div>
</div>
</body>
</html>关于jquery - 无法滚动固定 div 下的元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39899903/