通过画布将滚动事件传递到下面的div

Question

无论指针是在灰色区域（容器div）还是红色区域（画布元素在顶部）上方，我都希望文本垂直滚动。当前，画布阻止滚动事件在下面传播。是否只有CSS解决方案？

请参见codepen和下面的图像。

这是我的代码：

before_execute

Answer 1

你是如此亲密。

您需要在position类上将fixed设置为.container，然后将pointer-events: none;添加到.overlay类中。这样就可以了。

参见下文：

.container {
    background: #CCCCCC;
    width: 200px;
    height: 200px;
    position: fixed;
    border: 4px black solid;
}
.content {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.overlay {
    border:1px solid black;
    background: rgba(255,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 150px;
    width: 150px;
    pointer-events: none;
}

<div class="container">
  <div class="content">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
  </div>
  <canvas class="overlay">
  </canvas>
</div>

Answer 2

代替解决问题，您可以避免它。在以下示例中，我仅将pointer-events:none上的画布用于wheel。这将允许您滚动画布。但是，一旦您单击container，我将删除画布的内联样式。另外，我本可以写test.style.pointerEvents = "initial"

test.addEventListener("wheel", ()=>{
  test.style.pointerEvents = "none";
  console.log("w")
})

container.addEventListener("click",(evt)=>{test.style.cssText = "";
                                      console.log(oMousePos(test, evt))})

function oMousePos(elmt, evt) {
      var ClientRect = elmt.getBoundingClientRect();
                return { //objeto
                x: Math.round(evt.clientX - ClientRect.left),
                y: Math.round(evt.clientY - ClientRect.top)
      }
}

.container {
    background: #CCCCCC;
    width: 200px;
    height: 200px;
    position: relative;
    border: 4px black solid;
}
.content {
    width: 100%;
    height: 100%;
    overflow: scroll;
}
.overlay {
    border:1px solid black;
    background: rgba(255,0,0,0.5);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left:0;
    height: 150px;
    width: 150px;
  pointer-events:auto;
}

<div class="container" id="container">
  <div class="content">
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
    blah<br/>blah<br/>blah<br/>blah<br/>blah<br/>
  </div>
  <canvas class="overlay" id="test">
  </canvas>
</div>