无法滚动固定 div 下的元素答案

【问题标题】：can't scroll elements that are under a fixed div无法滚动固定 div 下的元素
【发布时间】：2016-10-06 15:22:05
【问题描述】：

我有一个带有半透明图像的 div 元素，位置：固定，顶部：0，左侧：0 和高度：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>

【问题讨论】：

你的代码是???? ...不可能知道问题出在您的代码中。这工作jsfiddle.net/fvushnho
滚动条是出现在页面元素上还是整个页面本身？例如，如果滚动条位于div 上，并且您在上面有一个固定的 div，您将无法聚焦下面的 div - 因此，您无法滚动它。但是，100% 高度和 100% 宽度的固定 div 不应中断页面滚动。
是的，滚动条对应一个包含所有元素的 div 容器。我添加了一些代码以便更好地解释。

标签： jquery html css

【解决方案1】：

我有一个想法给你，而不是将图像放在要滚动的元素上方，如何将其放在它们下方，具有相同的不透明度。

然后还要更改您正在滚动的 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>

【讨论】：

感谢您的想法。对我的真实代码进行一些修改，效果很好，这个想法解决了问题标题的问题，