[英]Scrollable element blocked by overlay div
我要求將疊加層div(z順序)放置在可滾動的[pre]元素上方。 問題是,我無法再在pre元素內滾動,因為覆蓋層阻止了它。
問:是否可以通過div傳遞滾動事件,使其到達基礎元素?
CSS:
.dropzone {
pointer-events:none;
}
#myimage {
float: left;
border-width: 0px;
border-style: none;
background-color:none;
padding: 0px;
position: relative;
}
#myoverlay {
position: absolute;
background-color:#139C8A;
background-image: url('../images/drag-icon-white.png');
background-size: 160px 66px;
background-repeat: no-repeat;
background-position: center;
opacity:0.0;
z-index:-1;
}
#myresponse {
float: right;
border-width: 0px;
border-style: none;
background-color:none;
padding: 0px;
position: relative;
}
.mycode {
text-align:left;
color:#EFEFEF;
background-color:#3C3C48;
border-width: 0px;
border-style: none;
overflow-y: scroll;
position: relative;
}
HTML:
<div class="container">
<div id="myoverlay"> </div>
<div class="row">
<div class="col-md-12">
<div id="myimage">
<canvas id="myCanvas" width="970" height="485"></canvas>
</div> <!-- end col-md-4 -->
<div id="myresponse">
<pre id="mycode" class="mycode">
<span style="color:#139C8A"><i>(Response will appear here)</i></span>
</pre>
</div>
<div id="dropzone" class="dropzone-detect detect-droppable"></div>
</div>
</div><!-- end row -->
</div> <!-- /container -->
您已將CSS分配給類.dropzone
。 但是沒有dropzone類,只有ID! 嘗試以下CSS:
#dropzone { pointer-events:none; }
但是請注意, 這在版本11以下的IE中不起作用 。 對於那些瀏覽器,您可以使用polyfill 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.