固定されたdivの下にある要素をスクロールできません

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" #VCBody上に示されるべき影画像と固定DIVです。

"#VCBody"はメインコンテナです。

".vcElementContainer"は、#VCBodyの内部にある要素のコンテナです。

要素はシャドーとVCBodyの上に他のhtmlコードを表示します。

$("#VCBody").prepend("<div class='vcBodyShadow'></div>");

は、HTML：：すべての要素に "#VCBody" オーバー影を表示する

とjQuery

<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をフォーカスすることができないため、スクロールできません。しかし、100％高さと100％幅の固定ディビジョンでは、* page *スクロールを中断してはいけません。 – Santi

はい、スクロールバーはすべての要素を持つdivコンテナに対応しています。私はより良い説明のためにいくつかのコードを追加しました。 – MorgoZ

私の代わりに有していると、あなたのためのアイデアを持っていますスクロールしたい要素の上の画像、同じ不透明度の下に置く方法について説明します。

また、スクロールしている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>

出典

2016-10-06 16:05:11

アイデアありがとう。私の実際のコードにいくつかの改造を加えることはすごく効果的でした。そのアイデアは質問のタイトルの問題を解決し、 – MorgoZ

固定されたdivの下にある要素をスクロールできません

答えて

関連する問題