스크롤 가능한 요소가 오버레이 div에 의해 차단되었습니다.

Question

스크롤 가능한 [pre] 요소 위에 오버레이 div를 배치해야합니다 (z- 오더). 문제는 오버레이가 차단하고 있기 때문에 더 이상 pre 요소 내에서 스크롤 할 수 없다는 것입니다.

Q : 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 :

당신은 클래스 .dropzone에 CSS를 할당 한

<div class="container"> 
    <div id="myoverlay">&nbsp;</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 --> 

Answer 1

. 그러나 dropzone-class는 없으며 ID 만 있습니다! 다음 CSS를보십시오 :

#dropzone { pointer-events:none; } 

그러나 유의하시기 바랍니다, this isn't working in IE below version 11 있음을. 해당 브라우저의 경우 polyfill을 사용할 수 있습니다.