javascript - 可滚动元素被 overlay div 阻塞

Question

我需要在可滚动的 [pre] 元素上方放置一个覆盖 div(z 顺序)。问题是，我无法再在 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">&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

您已将 CSS 分配给 .dropzone 类。但是没有dropzone-class，只有一个ID!尝试以下 CSS:

#dropzone { pointer-events:none; }

但请注意，this isn't working in IE below version 11 .对于那些浏览器，您可以使用 polyfill .