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

#jquery #html #css

#jquery #HTML #css

Вопрос:

У меня есть элемент 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>

1. И ваш код ???? … невозможно узнать, в чем проблема, без вашего кода. Это работает jsfiddle.net/fvushnho

2. Отображаются ли полосы прокрутки для элементов страницы или для всей страницы? Например, если полоса прокрутки находится на a div , а над ней установлен фиксированный div, вы не сможете сфокусировать div ниже — и, следовательно, вы не сможете прокручивать его. Однако фиксированный div высотой 100% и шириной 100% не должен прерывать прокрутку страницы .

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

Ответ №1:

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

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

Вы бы добавили:

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