не может прокручивать элементы, которые находятся под фиксированным div

У меня есть элемент div с полупрозрачным изображением, позиция: фиксированная, сверху: 0, слева: 0 и высота: 100%. Под этим div у меня есть переменное количество элементов.не может прокручивать элементы, которые находятся под фиксированным div

Когда количество элементов достаточно велико, отображаются полосы прокрутки браузера, но невозможно прокручивать элементы из-за фиксированного div «over».

Как я могу сделать свиток под фиксированным 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" является фиксированной ДИВ с тенью изображение, чтобы показать над #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>

источник

2016-10-06 MorgoZ

И ваш код ???? ... невозможно понять, где проблема без вашего кода. Это работает https://jsfiddle.net/fvushnho/ – DaniP

Являются ли полосы прокрутки для элементов страницы или всей страницы? Например, если полоса прокрутки находится на 'div', и у вас есть фиксированный div над ней, вы не сможете сфокусировать div ниже - и, следовательно, вы не сможете ее прокрутить. Однако фиксированный div 100% высоты и 100% ширины не должен прерывать * page * прокрутку. – Santi

Да, полосы прокрутки соответствуют контейнеру div со всеми элементами. Я добавил код для лучшего объяснения. – MorgoZ

У меня есть идея для вас, а не имея изображение над элементом, который вы хотите прокрутить, о том, как поставить его под ними, с той же непрозрачностью.

Затем также измените непрозрачность divs, которую вы прокручиваете. Это придаст ему вид внизу.

Вы бы добавить:

$(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>

источник

2016-10-06 16:05:11

Спасибо за идею. Сделав некоторые адаптации к моему реальному коду, он отлично поработал, и идея решает проблему названия вопроса, – MorgoZ

не может прокручивать элементы, которые находятся под фиксированным div

ответ

Смежные вопросы